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.04735a2f.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路径为 'static/img/icon-basic.04735a2f.png' 
// 完整路径为 http://localhost:1644/static/img/icon-basic.04735a2f.png

问题描述

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

原因

  • 在webpack中会将图片来当做模块来用，图片被webpack解析后的路径都会被解析为/static/img/[filename].png，完整地址为localhost:1644/static/img/[filename].png
    • 注意：webpack编译默认会将图片复制到static/img下存放
  • 而直接使用: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文件夹下
    • 这个文件夹下的文件（夹）会按照原本的结构放在网站根目录下
    • 注意：这样的话必须写成绝对路径如/static/1.png
    • 缺点：放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64，所以为了兼顾可以把图片资源优化，还是不适合把图片资源放到static

vue-cli的assets与static区别

  • 根据webpack的特性，图片放assets中更为合适。如果放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64
  • 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]

参考

vue学习, 遇到的问题集合