webpack4-- 处理html中引入的图片

index.html

    <img src="./src/images/current_day_icon.png" alt="">

配置

   module: {rules: [{test: /\.(png|jpg|gif)$/,use: [{loader: 'file-loader',options: {name: '[name].[ext]',publicPath: "./images/",outputPath: "images/"}}]},{test: /\.(html)$/,use: {loader: 'html-loader',options: {attrs: ['img:src', 'img:data-src', 'audio:src'],minimize: true}}}]

打包结果

必须file-loader和html-loader’同时使用才会把img打包到build/images

webpack4-- 处理html中引入的图片相关推荐

Vue-在data中引入静态图片路径
在data中引入静态图片路径首先tempate中内容都一样: <template slot="pic" slot-scope="{ row }"> ...
Vue单文件中引入背景图片时，四周有空白的问题
Vue单文件中引入背景图片时,四周有空白的问题问题背景初始引入背景图更新后的背景图设置问题背景近期公司有个管理系统前后端分离,但是前端人员不够,只能我们后端来凑,而在前端的开发过程中总是遇到 ...
webpack 在js中引入静态图片
原文链接: webpack 在js中引入静态图片上一篇: gif 屏幕录制下一篇: js 使用默认参数达到强制参数的目的在js中引入静态文件在自己实现一个tab组件时遇到这个问题,点击不同的t ...
HTML中引入在线图片
在HTML中不用下载就引入其他网页上的图片 1.在谷歌浏览器中将光标放到图片上,鼠标点击右键,再点击复制图片地址 2.将复制的地址粘贴到src中 <img src="https://i ...
vue中引入图片为什么使用require
require 是 node 中的一个方法: 他的作用是 "用于引入模块. JSON.或本地文件". 也就是说如果我们使用 require 来引入一个图片文件的话,那么 requi ...
修改svg图片的颜色html,通过CSS改变svg image引入的图片颜色？
在html元素中通过background设置图片icon,然后通过css3的filter滤镜的drop-shadow 设置阴影来呈现这种改变图片颜色的效果.很不错的方法. 但是我现在的元素是在svg中 ...
vue样式引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理: 在 Jav ...
关于van-card中thumb引入本地图片而无法正常显示的解决方法
关于van-card中thumb引入本地图片而无法正常显示的解决方法前言解决办法总结前言最近在弄一个微信公众号,是H5前端,用到的是vant组件. 当然Vant的官方文档以及例子都有,但是很 ...
在Vue-cli脚手架中引入图片最常用的两种方法
CommonJS API定义了很多普通应用程序(主要指非浏览器的应用)使用的API,require就说其中之一,我们通常需要在组件中引入图片时,可以在Data里使用这个方法require(" ...

webpack4-- 处理html中引入的图片

index.html

配置

打包结果

webpack4-- 处理html中引入的图片相关推荐

最新文章

热门文章