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 ...
随机推荐
- ORACLE 博客文章目录
从接触ORACLE到深入学习,已有好几年了,虽然写的博客不多,质量也参差不齐,但是,它却是成长的历程的点点滴滴的一个见证,见证了我在这条路上的寻寻觅觅,朝圣的心路历程,现在将ORACLE方面的博客整理 ...
- java并发包分析之———AQS框架
一.什么是同步器 多线程并发的执行,之间通过某种 共享 状态来同步,只有当状态满足 xxxx 条件,才能触发线程执行 xxxx . 这个共同的语义可以称之为同步器.可以认为以上所有的锁机制都可以基 ...
- memocache 分布式搭建
memcached+magent实现memcached集群 首先说明下memcached存在如下问题 本身没有内置分布式功能,无法实现使用多台Memcache服务器来存储不同的数据,最大程度的使用 ...
- CSS position 笔记+实验
目录: 1.static 2.relative 3.absolute 4.fixed 5.实验:static, relative, absolute中,父元素-子元素高度关系 6.z-index 7. ...
- ubuntu导入公钥的方法
导入公钥的办法: #方法1: gpg --keyserver subkeys.pgp.NET --recv 6E871C4A881574DEgpg --export --armor 6E871C4A8 ...
- git如何移除某文件夹的版本控制
目录结构如下 project bin lib src ...... 执行如下的操作 git add . git commit -m "add bin/ lib/ src/" git ...
- unity零基础开始学习做游戏(五)看看你的完成度,进度条了解一下?
-------小基原创,转载请给我一个面子 上回书说道,英雄和魔王都做完了,子弹也能发射了,就是不知道啥时候能干死魔王.那小基得做个血条来展示一下,他离死不远了(•౪• ) 其实血条也可以看作是进度条 ...
- Ubuntu 18.04 启动root账号并授权远程登录
Ubuntu 18.04 刚刚上市2个月,下载安装,尝尝鲜~ 安装界面看上去舒服许多, 安装的速度也较之前17.04 和16.04 都快了许多.抱歉,未截图. Ubuntu 安装完成后默认不启动roo ...
- java深入浅出之数据结构
1.整形数据 byte.short.int.long,分别是1248个字节的存储量,取值范围也是依次增大的,其中int是正负21亿多: long a = 1111222233334444L:记住后面要 ...
- 拖拽模块move2
之前的模块代码太死板了,由于内部定义了控件的ID,使用起来很不方便,so-----直接看代码 <script> var move =(function(){ function drop(b ...