如何在webpack中成功引用到图片?
打包图片时,你可曾遇到在产出目录文件夹找不到图片,即便找到了,但是页面说引用不到资源?页面上或者文件中引用的图片地址不对?
一、在webpack中引入图片需要url-loader
//webpack配置 { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: path.posix.join('static', 'img/[name].[hash:7].[ext]') } }
二、html中
1、link 标签图标
我的期望是打包出来的图标带有哈希值或者变成data:image/png;base64,打包路径也不会被修改。下面介绍两种方案,各有优劣。
方案A:配置插件
在配置文件中给html-webpack-plugin设置favicon参数,即可成功打包。
//修改webpack配置文件 const HtmlWebpackPlugin = require('html-webpack-plugin'); new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, favicon: 'src/static/img/logo.png', minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' })
「优势」:方便快捷,可以在生产环境中成功加载图标文件,只要注意写出正确的路径即可。
「劣势」:打开本地模拟的生产环境,匪夷所思的是,图标路径是/logo.png,而不是src/static/img/logo.png,而且图标被打包的位置也不对,不是期望的地方。设置的时候,不能写哈希值,也无法变成格式。
方案B:用js修改路径
修改入口js文件,把加载结果写入标签。
//index.html <link rel="shortcut icon" type="image/x-icon" href="" id="J_logo"> //main.js //加载index.html的shortcut图标 import logoicon from './static/img/logo.png'; document.getElementById("J_logo").href = logoicon;
「优势」:图标路径被加载成data:image/png;base64,而且是期望的路径。
「劣势」:自己写代码,手动把图标数据填充到link标签中,这不符合vue的数据驱动视图理念,因为修改了DOM标签属性值。本来打算在index.html中用数据驱动修改,没起作用,瞬间发现那个link标签明显在vue挂载元素的外面,用vue指令毫无意义。所以喽,还是乖乖在main.js中操作吧。
我个人更倾向于方案B,因为路径看了更神秘。
方案C:用html-loader
具体用法向下看,你会找到答案。
2、img标签
webpack不识别html中img标签src引用的图片,html-webpack-plugin也做不到,此时要借助html-loader加载你的html片段,它会检查你引入的html片段里对图片的引用。
var path = require('path'); module.exports = { ... module: { rules: [ { test: /\.html$/, use: [ "html-loader" ] } ] }, htmlLoader: { ignoreCustomFragments: [/\{\{.*?}}/], root: path.resolve(__dirname, '../dist'), attrs: ['img:src', 'link:href'] } };
三、css中
/*css 样式*/ .avatar { display: inline-block; width: 100px; height: 100px; border-radius: 50%; background-image: url(../src/static/img/avatar.jpg); background-size: 100px 100px; }
四、js中
import avatar from './static/img/avatar.jpg'; document.getElementById("J_avatar").href = avatar;
如何在webpack中成功引用到图片?的更多相关文章
- 如何在latex 中插入EPS格式图片
如何在latex 中插入EPS格式图片 第一步:生成.eps格式的图片 1.利用visio画图,另存为pdf格式的图片 利用Adobe Acrobat裁边,使图片大小合适 另存为.eps格式,如下图所 ...
- 如何在mysql中存储音乐和图片文件
如何在mysql中存储音乐和图片文件? 果你想把二进制的数据,比如说图片文件和HTML文件,直接保存在你的MySQL数据库,那么这篇文章就是为你而写的! 我将告诉你怎样通过HTML表单来储存这些文件, ...
- angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?
1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...
- 工具分享:清理 Markdown 中没有引用的图片
前言: 之前,我写笔记的工具一直都是 notion,而且没有写博客的习惯.但是一是由于 notion 的服务器在国外,有时候很不稳定:二是由于 notion 的分享很不方便,把笔记分享给别人点开链接之 ...
- [TimLinux] JavaScript 如何在AJAX中替换元素的图片
1. 示例代码 /* * <img id="idTestImg" src="/static/test.png" /> */ var idTestIm ...
- 如何在webpack中使用loader
一.什么是loader loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader 类似于其他构建工具中“任务 ...
- 如何在JavaScript中正确引用某个方法(bind方法的应用)
在JavaScript中,方法往往涉及到上下文,也就是this,因此往往不能直接引用,就拿最常见的console.log("info…")来说,避免书写冗长的console,直接用 ...
- 如何在pyqt中使用 QGraphicsView 实现图片查看器
前言 在 PyQt 中可以使用很多方式实现照片查看器,最朴素的做法就是重写 QWidget 的 paintEvent().mouseMoveEvent 等事件,但是如果要在图像上多添加一些形状,那么在 ...
- 如何在Notepad++ 中成功地安装Emmet 插件
对于前端来说,Emmet 是一个好东西,但是好几次在 “Notepad++” 中安装后不能使用.今天认认真真地查找了失败原因,配置完成后,终于可以在 “Notepad++” 下正常使用了.故把过程记录 ...
随机推荐
- 越光后端开发——ygapi(1.新建项目ygapi、新建MySQL数据库yg、项目连接数据库)
1.新建MySQL数据库 show databases;//查看已经有的数据库 create database yg; 2.新建项目ygapi 1.使用pycharm新建django项目取名ygapi ...
- 基于USB网卡适配器劫持DHCP Server嗅探Windows NTLM Hash密码
catalogue . DHCP.WPAD工作过程 . python Responder . USB host/client adapter(USB Armory): 包含DHCP Server . ...
- LFYZ-OJ ID: 1021 邮票问题
邮票问题 Problem Description 设有已知面额的邮票m种,每种有n张,用总数不超过n张的邮票,能从面额1开始,最多连续组成多少面额.(1≤m≤100,1≤n≤100,1≤邮票面额≤25 ...
- 还在用Json完成Ajax,改用Beetl吧
原文链接:https://blog.csdn.net/xiandafu/article/details/44216905 作者:Beetl作者,闲大赋 浏览器通过AJAX,服务器返回json数据,无刷 ...
- 点评cat系列-应用集成
========================消息的基本属性========================消息的几个属性:type: 定义消息的 category, 比如 SQL 或 RPC 或 ...
- [物理学与PDEs]第4章第2节 反应流体力学方程组 2.3 混合气体状态方程
1. 记号与假设 (1) 已燃气体的化学能为 $0$. (2) 单位质量的未燃气体的化学能为 $g_0>0$. 2. 对多方气体 (理想气体当 $T$ 不高时可近似认为), $$\bex ...
- [物理学与PDEs]第1章第2节 预备知识 2.3 Faraday 电磁感应定律
1. Faraday 电磁感应定律: 设 $l$ 为任一闭曲线, 则 $$\bex \oint_l{\bf E}\cdot\rd {\bf l} =-\int_S \cfrac{\p {\bf B} ...
- Collections.unmodifiableMap(Map map)
public static <K,V> Map<K,V> unmodifiableMap(Map<? extends K,? extends V> m)返回指定映射 ...
- springMVC中 @RequestParam和@RequestBody的区别
首先,不可以同时传进@RequestParam和@RequestBody,好像可以传进两个@RequestParam 如果不加@requestparam修饰,相当于 加上@requestparam且各 ...
- java8 list和map的forEach
list forEach示例 public class HelloWorld { public static void main(String[] args) { List<User> l ...