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 ...
随机推荐
- MVC3 项目总结
验证 Validation 多样化验证规则 http://www.cnblogs.com/xling/archive/2012/07/11/2587002.html 最常见的验证方式是:在实体的属性上 ...
- JVM的运行原理以及JDK 7增加的新特性(一)
虚拟机(Virtual Machine) JRE是由Java API和JVM组成的.JVM的主要作用是通过Class Loader来加载Java程序,并且按照Java API来执行加载的程序. 虚拟机 ...
- Spring,@Controller,@RequestMapping, @ResponseBody,@RequestParam
1.@Controller,放在类的上方,使类生效; 2.@RequestMapping,,指定一个映射,method为访问方式,headers为含有指定请求头 3. @ResponseBody将返回 ...
- Netty入门
一.NIO Netty框架底层是对NIO的高度封装,所以想要更好的学习Netty之前,应先了解下什么是NIO - NIO是non-blocking的简称,在jdk1.4 里提供的新api,他的他的特性 ...
- 面向对象,更适合JavaScript
面向对象程序设计是软件开发中一个很庞大很复杂的话题,它并不是仅仅学会类.继承.封装.多态这些面向对象编程语法元素就表示掌握的,这些语法元素只是实现面向对象程序的工具, 就像砖块.水泥能搭建小屋,也能造 ...
- Java中常用的数据结构类
结构体系图 List ArrayList.LinkedList.Vector有什么区别? ArrayList 只能装入引用对象(基本类型要转换为封装类): 线程不安全: 底层由数组实现(顺序表),因为 ...
- CDN公共资源
SAE: http://lib.sinaapp.com/ Google: https://developers.google.com/speed/libraries/devguide?hl=zh-CN ...
- C语言编对双精度数保留一位小数
/*第一题*/ #include<stdio.h> //输入1.2345 输出1.2000 //输入1.2547 输出1.3000 main(){ ; printf("请输入:\ ...
- java使用Myeclipse创建Hibernate项目碰到的诸多问题总结
这两天一直在搞Myeclipse创建Hibernate的1对多映射. 由于缺乏经验,可算是把我坑惨了.控制台是不停地报错啊~~~~我差点就崩溃了. 1.看的是慕课网的Hibernate一对多映射教程, ...
- session熟知
Session 服务器端保存会话信息的技术. //如何获得session HttpSession session = request.getSession(); //如何操作session sessi ...