webpack打包之后，图片无法显示问题

最新推荐文章于 2025-04-02 13:53:10 发布
原创 最新推荐文章于 2025-04-02 13:53:10 发布 · 4.1k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue #webpack #JavaScript #编译打包 #web前端
博客主要讨论编译打包后图片显示不出来的问题。若图片在公共css样式中引入，打包抽离css会使引入路径改变导致图片无法显示，解决办法是将图片引入写在代码里。此外，图片过大超转换限制也会有问题，可更改图片大小限制。

编译打包之后，图片显示不出来？

  1. 若图片在公共css样式中引入，打包之后将css抽离，引入路径发生改变，故图片显示不出。
    解决方法：将图片引入写在代码里面
  2. 有些图片过大，超过打包时转换成base64图片的大小限制，可以去更改图片大小限制，具体方法如下：
    这里写图片描述
    这里写图片描述
webpack4.x打包图片文件遇到效果不显示的问题（file-loader加载遇到的狗血问题）
IT_CREATE的博客
06-21 3506
file-loader加载遇到的狗血问题-webpack4.x 最近在学习vue，看的b站视频学习，b站里面用的是webpack3.6，而我用的是webpack4.43.0版本的，在webpack4.x版本和3.x版本还是挺有区别的，比如配置，打包方式就不一样。在学习到图片文件的打包配置时，遇到了狗血问题，现阶段我还是说一下webpack4.x的操作步骤，怎么样执行到打包图片文件这个地方，遇到了什么问题？（当图片大于limit限制，启动file-loader加载生成文件，生成成功但是页面没有效果，同时配置f
【webpack】webpack打包后, 静态图片资源不显示的若干个问题
每天进步一点点, 靠近小目标一点点~
11-15 4241
最近在搭建公司的前端组件库, vue写的, webpack打包后, 在项目中引用组件库 其中有个组件引用了静态图片资源, 然而打包后在项目中引用该组件的图片就不显示了 遇到了以下若干问题, 小小记录一下~
vue项目使用webpack打包后,图片不显示
weixin_45032622的博客
11-01 6163
vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来.查看控制台也没有报错。错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置{.*)?$/,}我们这里将limit注掉之后，重新打包，图片便可以显示。
webpack打包全过程以及遇到图片不显示问题解决方法
weixin_43878062的博客
04-05 5036
Webpack打包全过程以及遇到css,js,img问题解决方法 文章目录Webpack打包全过程以及遇到css,js,img问题解决方法前言一、Webpack1、运用场景2、安装配置二、案例演示1.引入库2.读入数据总结 前言 Webpack是前端构建工具 前端构建工具就是把开发环境代码转化称运行环境代码。开发环境的代码要通过混淆压缩后才能上线运行，这样代码占用内存较小， 一、Webpack 一般需要构建工具处理的几种情况 代码压缩 将js、css代码混淆压缩，代码体积更小，运行更快 编译语法 编
webpack打包图片不显示问题
qq_44158369的博客
05-05 1889
给body添加一个div设置一张背景图片，以下为各个代码部分 打包不报错，但是浏览器打开不显示图片，而且打包之后dist文件夹下显示两张图片，一张可以打开，一张打不开。生成两张图片可能是css-loader版本不同，对引入背景图片的url的解析方式不一样，导致生成了两张图片（一个是正常由file-loader解析生成，一个仅由css-loader解析引入） 1.在webpack5中file-loader和url-loader已经被弃用，要使用它俩时，将模块类型设置为Javascri...
vue webpack打包后图片不显示问题以及路由页面无法显示问题
weixin_43840538的博客
10-01 1609
我把项目打包后，放到服务器上 ，发现图片什么的都加不出来， 网上说的修改config文件夹下的index.js里的 改为 "./” 我之前早就该过了，没用， 后来又看到一篇博客， 还要修改build文件夹下的utils.js 在里面添加： 参考博客：https://blog.csdn.net/rainbow8300/article/details/83010507 ...
webpack打包后的图片无法显示问题
weixin_45748460的博客
03-19 7175
使用图片作为背景图片，用webpack（前端模块化打包工具）进行打包，结果背景图片没有显示出来。在终端输入命令后没有显示任何错误， 看到浏览器这里提示找不到背景图片的所在地址！！！ 解决方案： webpack要将图片进行打包，需要安装儒url-loader加载器，加载器有个默认的设置选项limit：8196，当你的图片大小不超过8kb的时候，打包的时候会生成base64位的图片地址，这种情况下...
解决webpack5打包html中图片后图片无法显示问题
rlrw_t的博客
06-17 1949
解决webpack5打包html中图片后图片无法显示问题。 错误代码如下： //loader的配置 module: { rules: [{ test: /\.(png|svg|jpg|jpeg|gif)$/, loader: 'url-loader', }, { test: /\.html$/,loader: 'html-loader' } ] }, 此时打包好的html文件中的img标签路径（为错误路径）： 解决方案 ------在尚硅谷的webpack5视频
webpack在打包图片后出现的问题：background-image显示为“url(https://blog.csdn.net/[object%20Module])”，图片无法显示
你是我修复不了的bug，但我会用一生去维护
12-01 1826
webpack在打包图片后出现的问题：background-image显示为“url(https://blog.csdn.net/[object%20Module])”，图片无法显示 原因： 因为url-loader默认使用es6模块化解析，解析时会出现[object Module]。但是webpack5之后就没有这个问题了，可能默认已经配置。 解决方案： 关闭url-loader的es6Module，让他以commonjs的方式解析 在配置中添加：“esModule: false” { // 问题：默认处理不了html中
webpack打包图片时没报错但是不显示图片，教你一招解决
编程教培一线讲师
04-22 2868
在看webpack视频教学时因为老师的版本和自己的版本不一致导致在打包处理图片是一直显示不了图片，查询了一些技术论坛后才解决了这个困扰我好多天的问题 直接上源代码 看看我的目录 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
将springboot项目打war包,放入tomcat运行启动后,js css png加载不出来的解决办法
taiguolaotu的博客
03-20 1199
springboot项目如何达成war包,下面我提供一个链接,大家可以自行参考。 重要讲标题的问题。 首先只要将war文件放入webapps文件夹下，其次双击bin文件夹下的 这个文件进行启动war包. 第一次启动后，打开项目注意路径是 http://localhost:8080(tomcat配置文件 server.xml配置文件中的端口号 )/(webapps文件夹下 war包名称的.前缀) 即可启动项目。 比如我的是 我启动项目的路径就是 http://localhost:8080/lock 完
Web项目打成war包部署到Tomcat服务器出现图片丢失问题
qq_45284925的博客
06-10 2386
我们熟知的web项目部署流程是： 1.使用编译器运行项目进行本地访问，测试没有问题，开始进行项目部署。 2.使用编译器将项目导出成war包 3.将其放入到Tomcat的webapps目录下 4.然后运行tomcat服务。 5.通过浏览器访问项目。 然而小编我出现了一个很奇怪的问题，我在编译器上面运行访问并没有上面问题，但是我将项目部署在tomcat上以后，进行访问，发现了图片丢失，就看得到界面，就出现了如我标题上的问题了。 排查步骤： 1.首先检查tomcat logs目录下的日志，日志并没有报错任何错误。
vue-webpack打包后图片找不到
momDIY的博客
03-22 3351
一、问题描述 项目在使用webpack打包后，很常见的一个问题就是dev环境可见的图片在打包之后找不到文件。 二、异常原因 1.图片未被打包 当使用的图片url是动态拼接的，可能会出现webpack没有检测到该图片被引用的问题，所以打包后图片因为不存在而找不到。 2.图片路径错误 当一个图片被多次引用，当使用的是动态拼接为打包前图片存放的路径会找不到图片，因为打包时会把动态生成的路径直接存下来，不...
webpack打包时丢失个别背景图片
lemon_bubbly的博客
04-10 1414
build/utils.js文件夹下添加红框内的语句 原因：图片过大，没有转换成 base64 码引用
vue项目webpack打包后图片不展示问题
吴佳强的博客
01-10 1245
vue项目webpack打包后图片不展示问题
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
技术共享，共同进步！
04-11 2612
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
vue项目使用webpack打包部署后,图片不显示，查看控制台也没有报错。
u010609022的专栏
11-13 402
错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置。// limit: 10000,（注释掉就好了）
vue+webpack项目打包后背景图片加载不出来问题解决
weixin_42966151的博客
01-27 3302
vue+webpack项目打包后背景图片加载不出来问题解决
webpack 打包第三方库里有图片，集成包的时候图片变成本地路径加载不上，追寻了半天终于解决了困扰很久的问题。
weixin_42179304的博客
03-29 1249
,现在，webpack 将按照默认条件，自动地在 resource 和 inline 之间进行选择：小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。打包完之后的组件包：可以看出有图片已经打包成resource 处理了，如果将打包后的js直接放到Html 中引用也是没有问题的，路径也正确。二、问题描述。
vue项目打包后部分图片加载失败问题总结
最新发布
Yr123456_的博客
04-02 1055
Vue项目打包后动态背景图片加载失败的问题，主要由于webpack默认将10K以下图片转为base64格式，而大图片路径处理不当导致。解决方法：1）在vue.config.js中调整limit值控制图片转base64的阈值；2）修改publicPath配置资源加载路径。需注意base64虽能减少HTTP请求，但过大图片转base64会导致JS文件臃肿，影响加载性能和用户体验。合理设置转换阈值是关键，小图片适合转base64，大图片应保持原格式通过正确路径加载。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值