vue如何在本地引入图片

在Vue.js中，要在本地引入图片通常有两种常见的方法：

1. **通过相对路径引用**：
- 使用`src`属性时，直接指定图片文件的相对路径即可，例如：

     <img :src="require('./images/myImage.jpg')" alt="My Image">

这里`./images/myImage.jpg`表示图片位于当前组件的`images`目录下。

2. **通过`v- 如果图片源需要在数据或计算结果中动态确定，可以使用`v-bind`或简写`:src`:

     <img v-bind:src="imageUrl" alt="My Dynamic Image">

然后在对应的Vue实例数据中设置`imageUrl`变量，如 `this.imageUrl = './images/myImage.jpg'` 或者是一个函数返回值。

3. **使用`file-loader`等webpack插件处理**：
- 如果图片是通过模块系统导入的，或者项目使用了Webpack，可能需要配置`url-loader`或`file-loader`来处理图片资源，使其可以在浏览器中显示。

记得在开发环境中，由于文件路径可能会受到服务器设置的影响，最好使用绝对路径或者使用`~`通配符来指定从项目根目录开始的路径。