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 ...
随机推荐
- Java Web开发中路径问题小结
Java Web开发中,路径问题是个挺麻烦的问题,本文小结了几个常见的路径问题,希望能对各位读者有所帮助. (1) Web开发中路径的几个基本概念 假设在浏览器中访问了如下的页面,如图1所示: 图1 ...
- c语言,文件操作总结
C语言文件操作 一.标准文件的读写 1.文件的打开 fopen() 文件的打开操作表示将给用户指定的文件在内存分配一个FILE结构区,并将该结构的指针返回给用户程序,以后用户程序就可用此FILE指针来 ...
- python---用户登录程序
需求: 1. 用户登录,判断用户名密码是否正确 2. 密码输入三次不对则锁定账号 3. 锁定账号无法登录 分析: 1. 输入账号,判断账号是否存在,即账号是否在账号文件中存在: 2. 如果账号存在,则 ...
- java线程之线程通信控制
在上篇我们看到,A线程往公共资源库(对象)提供了一条数据,然后B线程从库中提取了数据并打印出来. 实际项目中,我们不可能只往库中提供一条数据,而且库的大小也不会是无穷大的,那么我们就会有这样一 个需求 ...
- java I/O (一)
java 的I/O类基本上可以分为6大类:二进制的输入,二进制的输出,文本的输入,文本的输出,FILTER类和其他对文件操作的工具类. Java的I/O类主要在java.io的包里,其中两个主要的流为 ...
- 航遇项目react踩坑
1.iconfont应用: a.正常用法如下 <span className='iconfont' > iconfont的代码,例如: </span> b.react不能动态 ...
- javase---string类介绍01
一.String类简介 java.lang.String类用于描述一个字符序列.String类是不可变对象的类.其对象一旦被创建,永远无法改变.但是对象的引用可以重新赋值.而且String类被fina ...
- CAS与OAuth2的区别
CAS与OAuth2的区别 一. CAS的单点登录时保障客户端的用户资源的安全 . OAuth2则是保障服务端的用户资源的安全 . 二. CAS客户端要获取的最终信息是,这个用户到底有没有权限访问我( ...
- Netty中如何序列化数据
JDK提供了ObjectOutputStream和ObjectInputStream,用于通过网络对POJO的基本数据类型和图进行序列化和反序列化.该API并不复杂,而且可以被应用于任何实现了java ...
- SSM-SpringMVC-32:SpringMVC中灌顶传授文件上传
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 我将用自认为最简单的语言,描述Springmvc的文件上传,来将老夫毕生功力灌顶传授给你 首先文件上传,又简至 ...