在vue中动态加载图片src属性，会出现图片加载不出来的情况

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

先说明下vue-cli的assets和static的两个文件的区别，因为这对你理解后面的解决办法会有所帮助

assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径，将有webpack解析为模块依赖

static：在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方，不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件，这是通过config.js文件中的build.assetsPublic和build.assertsSubDirectory链接来确定的。任何放在static/中文件需要以绝对路径的形式引用：/static[filename]

根据webpack的特性，总的来说就是static放不会变动的，第三档的文件，asserts放可能会变动的文件

问题代码：

<img :ref="item.name" :src="img.imgtwoway" alt />

组件data中

img.imgtwoway:\'@/assets/images/xxx.png\'

这样图片是加载不出来的，这样的情况下，图片在浏览器中的路径显示为/assets/images/xxx.png

 

需要更改成：

img.imgtwoway:require(\'@/assets/images/xxx.png\'),图片才能显示，图片在浏览器中的路径显示是经过base64加密的。

 

原因：在webpack中会将图片图片来当做模块来用，因为是动态加载的，所以url-loader将无法解析图片地址，然后npm run dev 或者npm run build之后导致路径没有被加工

以上是 在vue中动态加载图片src属性，会出现图片加载不出来的情况 的全部内容， 来源链接： utcz.com/z/376368.html

回到顶部