首先先说明下 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 文件路径错误问题的简单解决方法, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/140152.htm