webpack 使用file-loader 和 url-loader ，打包后图片不能查看且网页图片路径不正确

最新推荐文章于 2022-07-05 00:47:17 发布
最新推荐文章于 2022-07-05 00:47:17 发布
阅读量1.3k 收藏 2
点赞数 1
文章标签： 前端 webpack node.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48650019/article/details/121547535
版权
本文介绍了在webpack5中使用file-loader和url-loader打包图片后，图片无法正常显示的问题。作者分析了问题原因，指出webpack 5已用资源模块替代这两个loader，并提供了相应的配置解决方案。此外，还提到了降级到webpack 4作为备选方案，但可能会影响其他功能。
摘要由CSDN通过智能技术生成

目录 

文件结构

解决方法

文件结构

我在页面设置了两个div 来展示背景图片，图片由src/css 里面的less 文件引入

 在安装好file-loader 和 url-loader 后如下配置：

 打包后文件结构如下：

 页面：

最低0.47元/天 解锁文章
真的不太会
关注
webpack file-loader和url-loader的区别
10-17
例如，当在CSS或JS中引用一个图片文件时，`file-loader` 会根据配置将图片复制到指定的输出目录，并更新引用的URL，以便在打包后的应用中找到这个文件。 2. **url-loader**： - `url-loader` 是 `file-loader` 的...
详解webpack之图片引入-增强的file-loader：url-loader
10-17
主要介绍了详解webpack之图片引入-增强的file-loader：url-loader，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack-url-loader 解决项目中图片打包路径问题
10-17
主要介绍了webpack-url-loader 解决项目中图片打包路径问题,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
wepack使用url-loader/file-loader出现的路径问题
syx_12的博客
04-25 411
在使用url-loader和file-loader的时候，我的图片路径总是不正确，默认路径加载到了项目路径的src下了。 我的webpackk.config.js配置如下： <script> const path = require('path'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bund
js file 对象_webpack - file-loader 打包路径错误问题
weixin_39720003的博客
11-25 206
引言：webpack默认只能打包js文件，想要在代码中引用其他文件类型，需要不同的loader来处理。当代码中使用图片(png|jpe?g|gif)时，需要用到file-loader进行编译。然后再进行webpack打包。file-loader用法：版本@4.0.0配置：webpack.config.jsmodule使用:注意：要在html中引用图片进行打包需要安装html-withimg-loa...
关于webpack的file-loader与url-loader打包出现路径不对的问题
huhudeni的博客
12-16 2084
这个是试验包 链接：https://pan.baidu.com/s/17zlR7WIRDw3y18Kk7mJYUA 提取码：o4pr 复制这段内容后打开百度网盘手机App，操作更方便哦 笔者在搭建的webpack的包目录结构如下 但是打出来的包却说在src/css中找不到image/ceshi1.png文件。后来发现问题了 需要这样去设置 默认image是src中图...
webpack:url-loader打包后找不到图片、字体路径问题
m0_37709148的博客
01-17 1095
webpack:url-loader打包后找不到图片、字体路径问题
解决 Webpack 打包图片不报错也不显示问题，但其图片就是显示不出来的问题
su_yun的博客
04-20 1395
问题描述： A、在 webpack.config.js 中也添加了代码为 //limit用来设置字节数，只有小于limit值的图片，才会转 //为base64图片 {test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:"url-loader?limit=16940"} B、在 ‘.css’ 文件中添加的信息为： #box{ width: 700px; height: 500px; background-colo
问题记录：file-loader和url-loader同时使用引起的图片不展示
qq_30206955的博客
12-02 1078
问题描述：再vue项目中的chainWebpack中添加里file-loader，导致图片地址改为base64但是图片不展示 解决过程： file-loader：对文件的名称，打包后的地址和打包后的输出位置进行修改 url-loader：可以通过对文件大小进行设置来判断是对图片进行引用还是直接编码再html代码中 vue inspect > output.js：可以查看vue最后的有效配置（官网找的） 通过使用vue inspect > output.js我们可以再得到的js文件中默认
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
11-29
最近在学习使用webpack4.0自己搭建vue脚手架，在搭建过程中，踩了许多坑，使用file-loader打包图片文件时就遇到了以下的问题。 这是我的webpack 处理打包图片相关配置项： ... module: { rules: [ ... { test: /\.(jpe?g|png|gif|svg)$/i, use: [ { loader: 'url-loader', options: { limit: 10000, name: '[name].[ext]', outputPath: 'imgs/' } } ] },
webpack配置file-loader后无法显示图片
qq_44380226的博客
07-05 894
webpack5中配置file-loader打包后无法正常显示图片1.在 webpack5 中 css-loader 会对 url() 处理为require(),旧的assets loader与新的assets loader冲突官网: 2.资源的引用路径变为[object],webpack5中file-loader使用了esModule语法使用新的assets loader配置file-loader...
解决webpack打包 标签样式图片报错
qq_36235046的博客
02-07 411
在webpack中尽量避免使用标签，例如<div> <img src="./images/km.jpg" alt=""></div> 打包会报错，解决方案是 配置 webpack-dev-server "scripts": { "server": "webpack-dev-server --open", "build":"webpack"...
解决webpack打包后图片加载失败的bug（适用于所有本地静态资源）
vvv3171071的博客
10-28 1710
最左的图片是解决后加载成功的，另外三张是加载失败的。 原因：webpack把img当成是一种资源，所以使用时要先引进，给路径加上require()即可~ 解决方法： 数组的第一个对象的pic_url是加了require()的，第二个是没加的，对应最初那张页面效果。所以第一张能显示，第二到第四张加载失败。 上红框为能加载成功的图片的路径（打包到了dist目录下的assets静态资源文件夹下），下红框为加载失败的路径（依旧是本地的原路径） 全部url都加上require()，完工！（手动水印，哈哈） ..
webpack踩坑二：解析html中的图片
i'm cool 的博客
05-07 373
错误经历：安装了html-loader,html-webpack-plugin，使用了html模板，导致html图片不能解析 这里的img不能在页面中正确的解析出现 解决方案： 1.去掉配置中的html-loader 2.html模板中图片路径采用ejs引入 页面成功显示图片 ...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
热门推荐
for_weber的博客
05-23 6万+
    Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。    问题一：我在打包完成后，打开index.html文件发现地址并没有携带路由。       这样的话页面就是空白了，因为没有组件被添加到页面中。打开F12会看到一堆的...
vue build后 less sass background-img找不到文件
mengty的博客
08-01 1534
修改build下面的utils.js配置if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: ‘../../’, //注意: 此处根据路径, 自动更改 解决css background img 找不到文件 fallba
webpack4基本使用和url-loader压缩图片
宏斌的博客
03-05 2144
执行npm init -y, 创建package.json 文件 最基本的配置文件 entry:入口文件 output：出口，出口里面添地址，和导出的包的名字 mode 是模式默认production，可以选择为development，也可none production：生产模式：去掉debug代码，和未使用的方法函数模块，小体积,速度快 development：开发模式：文件会大些，包含debu...
【webpack】安装url-loader并配置参数后，webpack打包报错：Module build failed: Error: Cannot find module ‘file-loader‘
闫小样丶的博客
09-17 1524
https://www.cnblogs.com/jying/p/8280956.html 在使用webpack打包的时候，报错：Module build failed: Error: Cannot find module 'file-loader'。 打包文件dist中是这样的（我们想要的结果是打包后依旧是张图片，并放在单独的文件夹中） 思考问题出在哪里？这是在我webpack打包之前，首先使用命令安装了url-loader，没有报错 npm install url-loader@2.0.
Webpack图片引入优化：url-loader实战与配置
本文详细解析了Webpack中的一个实用插件——url-loader，它是一种增强版的file-loader，用于处理图片资源的加载问题。url-loader的主要作用是根据图片文件大小自动决定是否将其转换为Base64格式并写入HTML页面，从而...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值