zoukankan      html  css  js  c++  java
  • webpack下css/js/html引用图片的正确方式

    在webpack的处理下,为了使引用的图片被打包编译(以把src的图片文件编译到dist中或者对src的文件进行base64编码),应使用如下引用方式:


    1. 在html/ejs等中引用图片:

    借助require和es6语法引入

    <img src="${require('../../../../static_guojiang_tv/src/mobile/img/recharge/bg.png')}">

    2. 在css/vue组件中引用图片:

    照常按照相对路径引用

    css:
    background: url(../../img/backpack/all.png);
    
    vue组件:
    <img class="round_bg" src='../../img/store/img_4.png'>

    3. 在js中引用图片:


    需要借助require才能被webpack识别并打包图片资源

    let img = require('../../img/loveday/4.png');
    let img_html = `<img src="${img}"/>`



  • 相关阅读:
    开题
    kafka介绍原理
    xxl-job
    多线程使用
    基础
    linux命令
    oracle id 自增
    feign调用远程服务 并传输媒体类型
    复杂sql mybatis查询
    开源easyExcel应用
  • 原文地址:https://www.cnblogs.com/saysmy/p/9089374.html
Copyright © 2011-2022 走看看