在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. MVC3 项目总结

    验证 Validation 多样化验证规则 http://www.cnblogs.com/xling/archive/2012/07/11/2587002.html 最常见的验证方式是:在实体的属性上 ...

  2. JVM的运行原理以及JDK 7增加的新特性(一)

    虚拟机(Virtual Machine) JRE是由Java API和JVM组成的.JVM的主要作用是通过Class Loader来加载Java程序,并且按照Java API来执行加载的程序. 虚拟机 ...

  3. Spring,@Controller,@RequestMapping, @ResponseBody,@RequestParam

    1.@Controller,放在类的上方,使类生效; 2.@RequestMapping,,指定一个映射,method为访问方式,headers为含有指定请求头 3. @ResponseBody将返回 ...

  4. Netty入门

    一.NIO Netty框架底层是对NIO的高度封装,所以想要更好的学习Netty之前,应先了解下什么是NIO - NIO是non-blocking的简称,在jdk1.4 里提供的新api,他的他的特性 ...

  5. 面向对象,更适合JavaScript

    面向对象程序设计是软件开发中一个很庞大很复杂的话题,它并不是仅仅学会类.继承.封装.多态这些面向对象编程语法元素就表示掌握的,这些语法元素只是实现面向对象程序的工具, 就像砖块.水泥能搭建小屋,也能造 ...

  6. Java中常用的数据结构类

    结构体系图 List ArrayList.LinkedList.Vector有什么区别? ArrayList 只能装入引用对象(基本类型要转换为封装类): 线程不安全: 底层由数组实现(顺序表),因为 ...

  7. CDN公共资源

    SAE: http://lib.sinaapp.com/ Google: https://developers.google.com/speed/libraries/devguide?hl=zh-CN ...

  8. C语言编对双精度数保留一位小数

    /*第一题*/ #include<stdio.h> //输入1.2345 输出1.2000 //输入1.2547 输出1.3000 main(){ ; printf("请输入:\ ...

  9. java使用Myeclipse创建Hibernate项目碰到的诸多问题总结

    这两天一直在搞Myeclipse创建Hibernate的1对多映射. 由于缺乏经验,可算是把我坑惨了.控制台是不停地报错啊~~~~我差点就崩溃了. 1.看的是慕课网的Hibernate一对多映射教程, ...

  10. session熟知

    Session 服务器端保存会话信息的技术. //如何获得session HttpSession session = request.getSession(); //如何操作session sessi ...