在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}"/>`

webpack下css/js/html引用图片的正确方式的更多相关文章

  1. CSS Image Sprite--网页图片应用处理方式

    CSS Sprites简介 CSSSprites在国内很多人叫css精 灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片 ...

  2. css sprite---css精灵网页图片应用处理方式分析

    CSSSprites,在前端图片处理中经常用到的一种高效方法,下面参考百度百科的总结,非常到位,学习一下吧! CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页 ...

  3. Xaml引用图片路径的方式

    最近写代码的时候遇到过好几次引用某个路径下图片资源的情况,思索了一下,便将自己所知的在xaml里引用图片资源的方法写成了个小Demo,并完成了这篇博文.希望罗列出的这些方式能够对大家有所帮助. Xam ...

  4. 在vue.js引用图片的问题

    <div id="img"> <img src="img.png" class="img"> </div> ...

  5. maven-replacer-plugin 静态资源版本号解决方案(css/js等)

    本文介绍如何使用 maven 的 com.google.code.maven-replacer-plugin 插件来自动添加版本号,防止浏览器缓存. 目录 1.解决方案 2.原始文件和最终生成效果 3 ...

  6. vue.js 独立引用css文件图片路径错误

    vue的环境是用vue-cli,写在vue文件的图片引用build之后的路径都没什么问题 但是有的时候我们会有一些公共的css文件单独的放在assets目录下 如下图所示 这里当build后发现写在c ...

  7. css和js引用图片的路径问题

    原文转自:http://www.cnblogs.com/azumia/archive/2012/06/17/2552346.html 在JS文件中书写相对路径:JS文件是指在页面中引用的外部JavaS ...

  8. WEB-INF目录下的jsp怎么引用外部文件:js,css等

    在项目中,为了安全.我们通常会将jsp文件放在WEB-INF下面,对于放在WEB-INF下面的js或是css等资源文件.我们通常可以通过相对路径来引用,而如果是放在WEB-INF之外的js 或是 cs ...

  9. 【原】浅谈Firefox下的js、css、图片阻塞现象(一)

    外部js文件阻塞body中的图片 以如下html为例: <!DOCTYPE HTML> <html> <head> <meta http-equiv=&quo ...

随机推荐

  1. java的老说三大框架

    一直不明白java的老说三大框架,怎么就一个SSH,今天终于有了一点点的了解. 三大框架就是Spring框架,Struts框架,Hibernate框架. Spring提供了管理业务对象的一致方法并且鼓 ...

  2. MySQL数据库开发规范知识点

    前言: 设计规范更多的是为了确保数据库设计的合理性.为了项目最终的协调稳定性,而命名规范则更多的是为了确保设计的正式和统一. 约定优先于配置(Convention Over Configuration ...

  3. Android Gradle 自定义Task 详解

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/76408024 本文出自[赵彦军的博客] 一:Gradle 是什么 Gradle是一 ...

  4. Ocelot中文文档-Qos服务质量

    目前Ocelot支持一种QoS功能. 如果您希望在请求向下游服务时使用断路,则可以在ReRoute中进行设置. 这个功能使用了一个名为Polly的.NET库,这个库很棒,在这里可以找到它. 添加如下配 ...

  5. 微软黑科技强力注入,.NET C#全面支持人工智能

    微软黑科技强力注入,.NET C#全面支持人工智能,AI编程领域开始C#.Py--百花齐放 就像武侠小说中,一个普通人突然得到绝世高手的几十年内力注入,招式还没学,一身内力有点方 Introducin ...

  6. centOS7虚拟环境搭建

    今天来记录一下使用WMware虚拟机来搭建centOS虚拟机的过程. 本次使用工具为VMware Workstation 14 Pro,可以从https://www.vmware.com/来获取所需工 ...

  7. vue 使用踩坑 note

    1. 如图,假如large那一行错写成 'large': item.ext_data.isLarge + '' === 'true',, 那么,编译不报错,控制台无提示,模板不输出. 2. vue的t ...

  8. Linux之SSH密钥认证

    1.SSH协议的认识 SSH 为 Secure Shell 的缩写,由 IETF 的网络小组(Network Working Group)所制定:SSH 为建立在应用层基础上的安全协议.SSH 是目前 ...

  9. Apache下载、安装及配置(Windows版)

    一.Apache的下载 1.点击链接http://httpd.apache.org/download.cgi,找到所需版本,如下图位置: 2.点击所需版本,选择Windows文件格式,如下图位置: 3 ...

  10. 【转】tomcat logs 目录下各日志文件的含义

    tomcat每次启动时,自动在logs目录下生产以下日志文件,按照日期自动备份   localhost.2016-07-05.txt   //经常用到的文件之一 ,程序异常没有被捕获的时候抛出的地方 ...