webpack和vue图片路径的问题

vue学习, 遇到的问题集合 本文总阅读量次

在vue中使用图片时，出现找不到图片的情况，这和webpack解析图片路径有关系

例子

1
2
3
4
5
6
7
8
9
10
// 错误示范：
<img :src="images/icon-basic.png"/>
// npm run dev 或者npm run build之后，解析到的地址是http://localhost:1644/images/icon-basic.png，这是找不到的
// 因为在webpack中会将图片来当做模块来用，图片被webpack后的路径都会被解析为/static/img/[filename].png，完整地址为localhost:1644/static/img/[filename].png

// 解决方法：
// 由于src里无法使用url的@相关配置，所以使用require将图片当成模块先引进来，再绑定
<img :src="require('@/images/icon-basic.png')"/>
// webpack解析后的src路径为 'img/icon-basic.04735a2f.png' 
// http://localhost:1644/img/icon-basic.04735a2f.png

问题描述

img的src属性直接绑定图片路径，然而图片加载失败（src中不能使用~@）

原因

  • 在webpack中会将图片来当做模块来用，图片被webpack解析后的路径都会被解析为/static/img/[filename].png，完整地址为localhost:1644/static/img/[filename].png

  • 而直接使用:src="images/icon-basic.png"，经过npm run dev 或者npm run build之后，webpack解析到的地址是http://localhost:1644/images/icon-basic.png，这是找不到的

解决方法1：使用require

  • 使用require将图片当成模块先引进来，再绑定
  • 这样npm run dev webpack解析后的src路径为 ‘img/icon-basic.04735a2f.png’，就能顺利找到了

解决方法2：statics文件夹

  • 将文件放在statics目录下（与src同级）(参考)，但是他不能被webpack优化
    • 图片一类的静态文件，可以放在这个static文件夹下
    • 这个文件夹下的文件（夹）会按照原本的结构放在网站根目录下
    • 注意：这样的话必须写成绝对路径如images:[{src:”/static/1.png”},{src:”/static/2.png”}]
    • 缺点：放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64，所以为了兼顾可以把图片资源优化，所以还是不适合把图片资源放到static

参考

vue学习, 遇到的问题集合