在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. iframe之局部刷新

      例如: <iframe src="1.htm" name="ifrmname" id="ifrmid"></ifram ...

  2. CentOS6.5 64位下安装部署Ansible

    这里使用的软件包为一下版本 Python-2.7.12.tgz pip-9.0.1.tar.gz ansible-2.2.0.0.tar.gz 其他依赖包使用pip方式安装 方便说明做以下设定: 控制 ...

  3. Go中string转[]byte的陷阱

    Go中string转[]byte的陷阱html {overflow-x: initial !important;}#write, body { height: auto; }#write, #writ ...

  4. Day4_生成器_三元表达式_列表解析_生成器表达式

    生成器:在函数内部包含yield关键,那么该函数执行的结果就是生成器. 生成器就是迭代器. def func(): print('first') yield 111111 print('second' ...

  5. FFPLAY的原理(七)

    同步音频 现在我们已经有了一个比较像样的播放器.所以让我们看一下还有哪些零碎的东西没处理.上次,我们掩饰了一点同步问题,也就是同步音频到视频而不是其它的同 步方式.我们将采用和视频一样的方式:做一个内 ...

  6. AngularJS + RequireJS

    http://www.startersquad.com/blog/AngularJS-requirejs/ While delivering software projects for startup ...

  7. python 脚本自动登陆校园网

    学校的校园网每次重开电脑时都要重新打开浏览器进行网页登录,繁琐的操作比较麻烦,于是便写了个python的脚本进行自动登录,下面说下具体的操作过程: 1. 方法说明 博主采用的python的 reque ...

  8. windows系统命令行

    使用   命令+/?就可显示命令的详细说明. 比如   ping/?就可知道ping命令的详细使用说明 netstat /?就可知道ping命令的使用说明

  9. C#之Redis所欲为

    一 Redis是一种支持多种数据结构的键值对数据库 1.1Redis下载地址 :https://github.com/MicrosoftArchive/Redis 建议下载 .msi结尾的应用程序进行 ...

  10. Python_异常处理结构与调试

    while True: x =input('Pleaes input:') try: x=int(x) print('You have input {0}'.format(x)) break exce ...