zoukankan      html  css  js  c++  java
  • vue中图片动态加载

    assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径,将有webpack解析为模块依赖

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

    var html = '<div class="nodata"><img src="../../../../assets/images/nodata.png" /></div>';
    _document.getElementById("PartyActivity").innerHTML = html;

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

    解决办法:

    data() {
    return {
    imgsrc: require("../../../../assets/images/nodata.png"),//将图片作为模块加载进去
    };
    },

    var html ='<div class="nodata"><img src=' + this.imgsrc + '></div>';
    _document.getElementById("PartyActivity").innerHTML = html;

  • 相关阅读:
    数据库相关(转)
    sql之left join、right join、inner join的区别
    PHP面试编程
    实验6 shell程序设计一(1)
    实验7 shell程序设计二(1)
    Linux软件安装管理
    Linux常用命令总结
    合唱团
    linux课后作业1
    linux网络服务实验
  • 原文地址:https://www.cnblogs.com/yyjspace/p/11764604.html
Copyright © 2011-2022 走看看