【vue】v-for中动态加载图片，图片路径拼接问题
字符串拼接：+
require
自己的代码
{{ index.dictLabel}}
分析一下
问题
(181条消息) vue踩坑日记--动态（v-for）图片路径问题_W&T的博客-CSDN博客
通过字符串拼接来动态获取图片地址，直接在v-for采用拼接字符串，图片在页面中没有正确显示，在线调试发现打包后的图片路径不对。
原因：
webpack没有对拼接后的路径进行解析，图片没有被引用到打包后的目录。
原理:（有关静态资源处理）
静态资源处理的两种方式
- 在js被导入，或者在template/CSS中通过相对路径被引用的，会被webpack处理。
（当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。在其编译过程中，所有诸如、background: url(…) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。
例如，url(./image.png) 会被翻译为 require(’./image.png’)，而：将会被编译到：h(‘img’, { attrs: { src: require(’./image.png’) }})）
- 放置在public目录或者通过绝对路径被引用的不会经过webpack处理，会直接被拷贝。
问题相对路径为什么没被编译：
因为在编译时图片的url还没有拼接好，{{}}（插值）表达式只会在渲染到页面上的时候执行，所以编译的时候src还是（拼接字符串）’./…/…/assets/img/’ + item + ‘.jpg’，这样的话webpack不认为这是一个模块，所以直接不处理，图片也就没有被编译。解决方法：
把图片作为资源引入，在图片的url加上require，变成require(url)。
参考：
vue踩坑日记--动态（v-for）图片路径问题_W&T的博客-CSDN博客
vue中for循环图片路径 动态生成图片_Ali_code的博客-CSDN博客_vue 动态生成图片列表
vue动态加载图片问题_fresh_nam的博客-CSDN博客_vue动态加载图片
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！