解决vue直接写本地图片地址图片不显示问题

### Vue 中动态绑定本地图片路径 图片不显示 解决方案 在 Vue 应用程序中，当尝试动态绑定本地图片路径时遇到图片不显示的问题通常是由于 Webpack 的模块解析机制所致。Webpack 默认不会处理未提前声明的资源导入请求。 为了使动态加载的本地图片能够正确显示，在 `data` 函数返回的对象内定义图片数组时应使用 `require()` 方法来预加载这些静态资源[^4]： ```javascript export default { name: 'ImageComponent', data() { return { imgPath: [ require('@/assets/images/img1.jpg'), // 使用 @ 别名指向 src 文件夹下的 assets 路径 require('@/assets/images/img2.jpg') ] }; } } ``` 接着可以在模板部分利用 `v-for` 指令遍历这个数组并为每一个 `<img>` 标签设置对应的 `src` 属性值: ```html <div> <template v-for="(path, index) in imgPath"> <img :key="index" :src="path" /> </template> </div> ``` 如果是在 JSON 数据文件中存储相对路径，则该 JSON 文件及其内部提到的所有媒体文件应当放置于项目的 `public/static` 文件夹下[^1]。此时可以直接访问 URL 地址而无需调用 `require()` 来引用它们，因为位于此位置上的任何东西都会被复制到构建输出目录而不经过打包工具处理。 对于那些不在编译阶段已知其确切名称或数量的情况，可以创建一个辅助函数用于按需加载图像资源。例如，可以通过传递参数给此类方法从而实现根据不同条件获取不同类型的图片链接[^3]: ```javascript methods: { getImgUrl(name, ext='png') { try { const url = require(`@/assets/${name}.${ext}`); return url; } catch (err) { console.error('Failed to load image:', err); return ''; } } } ``` 上述代码片段展示了如何安全地尝试加载指定名字和扩展名组合而成的图片，并且提供了基本错误处理逻辑以防万一某些情况下未能成功定位目标文件。