首先说明vue-cli中assets和static两个文件的区别

1.assets在项目编译的过程中会被webpack处理理解为模块依赖,如果执行npm run dev或npm run build命令行,assets会被编译,导致路径发生变化,所以如果写成绝对路径,会存在问题

2.static在项目编译的过程中webpack不会被解析,他相当于是存放第三方文件的地方,路径可写成绝对路径

总结:assets中的文件路径会变,static中的文件路径不变

解决办法:

1.将图片放到static文件中  例 images:[{src:”/static/1.png”},{src:”/static/2.png”}]

2.将图片作为模块加载到页面,webpack就可以将其解析(require())

在img的src中加入require

第一种用在a标签
<a :href="require('../../assets/601c5eaac1a0574a77f395aa9812d25.png')">
第一种用在img
<img :src="require('../../assets/601c5eaac1a0574a77f395aa9812d25.png')">

  

相关文章:

  • 2021-08-22
  • 2021-12-21
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-10-26
  • 2022-12-23
猜你喜欢
  • 2021-04-29
  • 2021-12-26
  • 2021-07-22
  • 2022-12-23
  • 2022-03-03
  • 2021-07-01
  • 2022-12-23
相关资源
相似解决方案