在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. eclipse中tomcat内存溢出设置

    Eclipse里启动Tomcat,配置内存大小 2009年12月11日 星期五 10:50 一般安装完eclipse之后,在安装目录下你应该可以看到有一个 eclipse.ini 文件,对了,就是在这 ...

  2. 使用JConsole以及VisualVM进行jvm程序的监控,排错,调优

    这里只是做一个备份,便于以后继续. 添加两个感觉好的链接吧: http://www.linuxidc.com/Linux/2015-02/113420.htm http://blog.csdn.net ...

  3. oracle 游标简单示例

    1.游标的概念以及作用 游标(Cursor)可以使用户想操作数组一样对查询出来的结果集进行操作,可以形象的看做一个变动的光标,其实际行是一个指针,它在一段Oracle存放数据查询结果集或数据 操作集的 ...

  4. HTML知识点总结

    HTML知识点总结 一.需要熟悉的基本快捷键 ctrl+c            复制 ctrl+v            粘贴 ctrl+x            剪切 ctrl+tab       ...

  5. 前端开发APP,从HBuilder开始~ 【转】

    内容简介 介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~ 无所不能的js 最开始js仅仅局限于网页上一些效果,操作网页内容等, 但是nodejs把js带入了 ...

  6. javascript中字符串和字符串变量的问题

    var s = new String("hello"); s.indexOf(1) = 'p'; //错误,indexof()是函数 s[1]='p' //错误,在c和c++可以改 ...

  7. 源码分析Session的台前幕后(Asp .Net MVC5)

    在这篇文章里,我们从源代码的角度重点分析Session的创建.缓存.销毁.管理. 通常我们说的Session指的是在控制器中使用的Session字段,该字段的类型是HttpSessionState.可 ...

  8. Python_重写集合

    class Set(object): def __init__(self,data=None): if data == None: self.__data = [] else: if not hasa ...

  9. 【转】深入理解margin

    由浅入深漫谈margin属性 2007-3-18 上午 - HTML/CSS/XML/XSL - CSS - margin margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元 ...

  10. Java并发包之同步队列SynchronousQueue理解

    1 简介 SynchronousQueue是这样一种阻塞队列,其中每个put必须等待一个take,反之亦然.同步队列没有任何内部容量,甚至连一个队列的容量都没有.不能在同步队列上进行peek,因为仅在 ...