zoukankan      html  css  js  c++  java
  • vue中data中引用本地图片报错404

    首先说明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')">
    

      

  • 相关阅读:
    java第九次作业
    java第八次作业
    java第七次作业
    java第六次作业
    java第五次作业
    java第四次作业
    java第三次作业
    java第二次作业
    java第一次作业
    Javascript设计模式-----装饰者模式
  • 原文地址:https://www.cnblogs.com/gqx-html/p/10734462.html
Copyright © 2011-2022 走看看