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}"/>`
webpack下css/js/html引用图片的正确方式的更多相关文章
- CSS Image Sprite--网页图片应用处理方式
CSS Sprites简介 CSSSprites在国内很多人叫css精 灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片 ...
- css sprite---css精灵网页图片应用处理方式分析
CSSSprites,在前端图片处理中经常用到的一种高效方法,下面参考百度百科的总结,非常到位,学习一下吧! CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页 ...
- Xaml引用图片路径的方式
最近写代码的时候遇到过好几次引用某个路径下图片资源的情况,思索了一下,便将自己所知的在xaml里引用图片资源的方法写成了个小Demo,并完成了这篇博文.希望罗列出的这些方式能够对大家有所帮助. Xam ...
- 在vue.js引用图片的问题
<div id="img"> <img src="img.png" class="img"> </div> ...
- maven-replacer-plugin 静态资源版本号解决方案(css/js等)
本文介绍如何使用 maven 的 com.google.code.maven-replacer-plugin 插件来自动添加版本号,防止浏览器缓存. 目录 1.解决方案 2.原始文件和最终生成效果 3 ...
- vue.js 独立引用css文件图片路径错误
vue的环境是用vue-cli,写在vue文件的图片引用build之后的路径都没什么问题 但是有的时候我们会有一些公共的css文件单独的放在assets目录下 如下图所示 这里当build后发现写在c ...
- css和js引用图片的路径问题
原文转自:http://www.cnblogs.com/azumia/archive/2012/06/17/2552346.html 在JS文件中书写相对路径:JS文件是指在页面中引用的外部JavaS ...
- WEB-INF目录下的jsp怎么引用外部文件:js,css等
在项目中,为了安全.我们通常会将jsp文件放在WEB-INF下面,对于放在WEB-INF下面的js或是css等资源文件.我们通常可以通过相对路径来引用,而如果是放在WEB-INF之外的js 或是 cs ...
- 【原】浅谈Firefox下的js、css、图片阻塞现象(一)
外部js文件阻塞body中的图片 以如下html为例: <!DOCTYPE HTML> <html> <head> <meta http-equiv=&quo ...
随机推荐
- eclipse中tomcat内存溢出设置
Eclipse里启动Tomcat,配置内存大小 2009年12月11日 星期五 10:50 一般安装完eclipse之后,在安装目录下你应该可以看到有一个 eclipse.ini 文件,对了,就是在这 ...
- 使用JConsole以及VisualVM进行jvm程序的监控,排错,调优
这里只是做一个备份,便于以后继续. 添加两个感觉好的链接吧: http://www.linuxidc.com/Linux/2015-02/113420.htm http://blog.csdn.net ...
- oracle 游标简单示例
1.游标的概念以及作用 游标(Cursor)可以使用户想操作数组一样对查询出来的结果集进行操作,可以形象的看做一个变动的光标,其实际行是一个指针,它在一段Oracle存放数据查询结果集或数据 操作集的 ...
- HTML知识点总结
HTML知识点总结 一.需要熟悉的基本快捷键 ctrl+c 复制 ctrl+v 粘贴 ctrl+x 剪切 ctrl+tab ...
- 前端开发APP,从HBuilder开始~ 【转】
内容简介 介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~ 无所不能的js 最开始js仅仅局限于网页上一些效果,操作网页内容等, 但是nodejs把js带入了 ...
- javascript中字符串和字符串变量的问题
var s = new String("hello"); s.indexOf(1) = 'p'; //错误,indexof()是函数 s[1]='p' //错误,在c和c++可以改 ...
- 源码分析Session的台前幕后(Asp .Net MVC5)
在这篇文章里,我们从源代码的角度重点分析Session的创建.缓存.销毁.管理. 通常我们说的Session指的是在控制器中使用的Session字段,该字段的类型是HttpSessionState.可 ...
- Python_重写集合
class Set(object): def __init__(self,data=None): if data == None: self.__data = [] else: if not hasa ...
- 【转】深入理解margin
由浅入深漫谈margin属性 2007-3-18 上午 - HTML/CSS/XML/XSL - CSS - margin margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元 ...
- Java并发包之同步队列SynchronousQueue理解
1 简介 SynchronousQueue是这样一种阻塞队列,其中每个put必须等待一个take,反之亦然.同步队列没有任何内部容量,甚至连一个队列的容量都没有.不能在同步队列上进行peek,因为仅在 ...