打包图片时,你可曾遇到在产出目录文件夹找不到图片,即便找到了,但是页面说引用不到资源?页面上或者文件中引用的图片地址不对?

一、在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中成功引用到图片?的更多相关文章

  1. 如何在latex 中插入EPS格式图片

    如何在latex 中插入EPS格式图片 第一步:生成.eps格式的图片 1.利用visio画图,另存为pdf格式的图片 利用Adobe Acrobat裁边,使图片大小合适 另存为.eps格式,如下图所 ...

  2. 如何在mysql中存储音乐和图片文件

    如何在mysql中存储音乐和图片文件? 果你想把二进制的数据,比如说图片文件和HTML文件,直接保存在你的MySQL数据库,那么这篇文章就是为你而写的! 我将告诉你怎样通过HTML表单来储存这些文件, ...

  3. angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?

    1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...

  4. 工具分享:清理 Markdown 中没有引用的图片

    前言: 之前,我写笔记的工具一直都是 notion,而且没有写博客的习惯.但是一是由于 notion 的服务器在国外,有时候很不稳定:二是由于 notion 的分享很不方便,把笔记分享给别人点开链接之 ...

  5. [TimLinux] JavaScript 如何在AJAX中替换元素的图片

    1. 示例代码 /* * <img id="idTestImg" src="/static/test.png" /> */ var idTestIm ...

  6. 如何在webpack中使用loader

    一.什么是loader loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader 类似于其他构建工具中“任务 ...

  7. 如何在JavaScript中正确引用某个方法(bind方法的应用)

    在JavaScript中,方法往往涉及到上下文,也就是this,因此往往不能直接引用,就拿最常见的console.log("info…")来说,避免书写冗长的console,直接用 ...

  8. 如何在pyqt中使用 QGraphicsView 实现图片查看器

    前言 在 PyQt 中可以使用很多方式实现照片查看器,最朴素的做法就是重写 QWidget 的 paintEvent().mouseMoveEvent 等事件,但是如果要在图像上多添加一些形状,那么在 ...

  9. 如何在Notepad++ 中成功地安装Emmet 插件

    对于前端来说,Emmet 是一个好东西,但是好几次在 “Notepad++” 中安装后不能使用.今天认认真真地查找了失败原因,配置完成后,终于可以在 “Notepad++” 下正常使用了.故把过程记录 ...

随机推荐

  1. 越光后端开发——ygapi(1.新建项目ygapi、新建MySQL数据库yg、项目连接数据库)

    1.新建MySQL数据库 show databases;//查看已经有的数据库 create database yg; 2.新建项目ygapi 1.使用pycharm新建django项目取名ygapi ...

  2. 基于USB网卡适配器劫持DHCP Server嗅探Windows NTLM Hash密码

    catalogue . DHCP.WPAD工作过程 . python Responder . USB host/client adapter(USB Armory): 包含DHCP Server . ...

  3. LFYZ-OJ ID: 1021 邮票问题

    邮票问题 Problem Description 设有已知面额的邮票m种,每种有n张,用总数不超过n张的邮票,能从面额1开始,最多连续组成多少面额.(1≤m≤100,1≤n≤100,1≤邮票面额≤25 ...

  4. 还在用Json完成Ajax,改用Beetl吧

    原文链接:https://blog.csdn.net/xiandafu/article/details/44216905 作者:Beetl作者,闲大赋 浏览器通过AJAX,服务器返回json数据,无刷 ...

  5. 点评cat系列-应用集成

    ========================消息的基本属性========================消息的几个属性:type: 定义消息的 category, 比如 SQL 或 RPC 或 ...

  6. [物理学与PDEs]第4章第2节 反应流体力学方程组 2.3 混合气体状态方程

    1.  记号与假设 (1)  已燃气体的化学能为 $0$. (2)  单位质量的未燃气体的化学能为 $g_0>0$. 2.  对多方气体 (理想气体当 $T$ 不高时可近似认为), $$\bex ...

  7. [物理学与PDEs]第1章第2节 预备知识 2.3 Faraday 电磁感应定律

    1.  Faraday 电磁感应定律: 设 $l$ 为任一闭曲线, 则 $$\bex \oint_l{\bf E}\cdot\rd {\bf l} =-\int_S \cfrac{\p {\bf B} ...

  8. Collections.unmodifiableMap(Map map)

    public static <K,V> Map<K,V> unmodifiableMap(Map<? extends K,? extends V> m)返回指定映射 ...

  9. springMVC中 @RequestParam和@RequestBody的区别

    首先,不可以同时传进@RequestParam和@RequestBody,好像可以传进两个@RequestParam 如果不加@requestparam修饰,相当于 加上@requestparam且各 ...

  10. java8 list和map的forEach

    list forEach示例 public class HelloWorld { public static void main(String[] args) { List<User> l ...