好久没更博了, 最近也不知道在忙啥, 反正就是感觉挺忙的, 在群里看到陆陆续续有刚入 vue 小伙伴问 vue 动态加载图片总是 404 的状况, 这篇就简单的说明为什么会出现以及解决办法有哪些
首先先说明下 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 放可能会变动的文件
问题来了, 用 js 动态加载 assets 或者本文件的图片出现 404 的状态码
代码实例
- <li v-for="(item,index) in images" :key="index">
- <img :src="item.src"></li>
- //js 部分
- data(){
- return {
- images:[{src:'./1.png'},{./2.png}]
- }
- }
跑起来发现图片不显示, 错误码为 404,
原因: 在 webpack 中会将图片图片来当做模块来用, 因为是动态加载的, 所以 url-loader 将无法解析图片地址, 然后 npm run dev 或者 npm run build 之后导致路径没有被加工被 webpack 解析到的路径都会被解析为 / static/img/[filename].png, 完整地址为 localhost:8080/static/img/[filename].png
解决办法:
将图片作为模块加载进去, 比如 images:[{src:require(./1.png')},{src:require(./2.png')}]这样 webpack 就能将其解析
将图片放到 static 目录下, 但必须写成绝对路径如 images:[{src:/static/1.png},{src:/static/2.png}]这样图片也会显示出来, 当然你也可以通过在 webpack.base.config.js 定义来缩短路径的书写长度
当然你说当本地图片太多时, 这样写岂不是很麻烦, 那么其实我们是一这样简化操作的
第一步: 在 static 里面新建一个 json 文件夹
第二部: 填写 json 文件, 如图
第三部: 将 json 引入响应的 vue 文件中, 解析引用就行了
如有疑问, 欢迎进行讨论
以上这篇基于 vue 动态加载图片 src 的解决方法就是小编分享给大家的全部内容了, 希望能给大家一个参考, 也希望大家多多支持脚本之家
您可能感兴趣的文章:
vue cli 使用绝对路径引用图片问题的解决
vue 图片加载与显示默认图片实例代码
来源: http://www.jb51.net/article/134385.htm