vue中图片引入与使用几种方式

在Vue中引入和使用图片主要有以下几种方式：

1. 静态资源目录：将图片放置在项目的 public 目录下，然后可以通过绝对路径直接引用。

<img src="/img/logo.png">

2. 以模块的方式引入：如果图片放置在 src/assets 目录，可以作为模块引入，然后在模板中通过相对路径使用。

// 在 <script> 中
import logo from '@/assets/logo.png';
 
export default {
  data() {
    return {
      logoSrc: logo
    };
  }
}

<!-- 在模板中 -->
<img :src="logoSrc">

3. 使用 require 函数：在模板中使用 require 动态加载图片资源。

<template>
  <div>
    <img :src="require('@/assets/logo.png')">
  </div>
</template>

4. 使用 v-bind 指令结合数据绑定动态更新图片。

<template>
  <div>
    <img v-bind:src="imageUrl">
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/your/image.png'
    }
  }
}
</script>

以上方法可以根据项目需求和上下文环境选择适合的方式来引入和使用图片。