美文网首页
vue-cli 动态加载图片图片src报404

vue-cli 动态加载图片图片src报404

作者: 秃头大叔 | 来源:发表于2018-03-02 16:30 被阅读0次

copy一段相关说明
首先先说明下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放不会变动的,第三档的文件,assets放可能会变动的文件

问题来了,用js动态加载assets或者本文件的图片出现404的状态码

解决方案1,通过require加载
data () {
    return {
      starlist1:[
          require("../assets/img/active0922/hstar.png"),
          require("../assets/img/active0922/lstar.png")
      ],
      starlist2:"../assets/img/active0922/hstar.png"
      
    }
  },

方案2,将资源防止在static目录,通过/static绝对路径使用

原因:在webpack中会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法解析图片地址,然后npm run dev 或者npm run build之后导致路径没有被加工【被webpack解析到的路径都会被解析为/static/img/[filename].png,完整地址为localhost:8080/static/img/[filename].png

原文地址:http://blog.csdn.net/Mr_YanYan/article/details/78783091

相关文章

  • vue-cli 动态加载图片图片src报404

    copy一段相关说明首先先说明下vue-cli的assets和static的两个文件的区别assets:在项目编译...

  • vue 动态加载图片src的解决办法

    记一次vue中图片加载的问题 用js动态加载assets或者本文件的图片出现404的状态码404代码 在webpa...

  • vue中图片src路径赋值

    vue中引入static文件夹中图片,本以为src中直接写入图片所在路径即可,结果发现图片无法显示,控制台报404...

  • vue-cli中图片路径不对的相关处理

    1.用js动态加载assets或者本文件的图片出现404的状态码 原因:在webpack中会将图片图片来当做模块来...

  • img标签onerror的循环调用

    img标签src加载图片,如果src加载失败,触发onerror事件加载一张默认图片; 如果onerror也加载失...

  • 懒加载的实现

    结构如下: 图片的动态加载就是通过读取li元素,然后获得li元素的data-src属性的值赋予动态创建的图片的sr...

  • vue 动态加载图片路径

    在用vue-cli脚手架生成的vue项目开发中,动态加载图片本地运行没有问题,但是打包后图片无法显示,图片路径40...

  • 项目优化

    图片懒加载,数据懒加载, 路由懒加载 1.图片懒加载原理 1.1 开始时 不设置src属性 1.2 图片在可视区域...

  • html img src 判断图片路径是否有效

    html img src 图片路径不存在或者存在但是路径无效无法正常加载出来的情况,动态替换成有效的默认图片,解决...

  • 图片懒加载

    图片懒加载 思路:起始的时候,不让图片进行加载,那么img的src属性设置为空,src = ' ',在自定义一个属...

网友评论

      本文标题:vue-cli 动态加载图片图片src报404

      本文链接:https://www.haomeiwen.com/subject/moiaxftx.html