webpack打包图片无法显示

最新推荐文章于 2024-01-10 14:38:55 发布
最新推荐文章于 2024-01-10 14:38:55 发布
阅读量800 收藏
点赞数 2
文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40030159/article/details/113829812
版权
新手在使用webpack打包时遇到图片无法显示和HTML中img标签引用图片的问题。解决方案包括在webpack.config.js的output中设置publicPath或在module的rules中指定。对于HTML引用图片，需要配置html-loader，通过设置esModule为false来解决引用问题。
摘要由CSDN通过智能技术生成

webpack打包图片无法显示

新手小白学习webpack 打包图片过程中遇到的问题 

使用依赖版本

文件相对目录和webpack.config.js

若删除options里面的publicPath Error: Automatic publicPath is not supported in this browser

原因参考链接http://www.79tui.com/happy/742090.html

上面是在css里面background属性添加背景图片，所以如果出现这样的问题是可以在webpack.config.js 里面的output 里面填写publicPath或者在module里面的rules 里面option里面写publicPath解决，

我不知道在这两个地方写的publicPath有什么不同？？？

在接下来在index.html中添加img标签通过src引入图片出现了第二个问题 

添加了html打包规则下面是代码：

 { 

最低0.47元/天 解锁文章
qq_40030159
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
webpack打包全过程以及遇到图片不显示问题解决方法
weixin_43878062的博客
04-05 4706
Webpack打包全过程以及遇到css,js,img问题解决方法 文章目录Webpack打包全过程以及遇到css,js,img问题解决方法前言一、Webpack1、运用场景2、安装配置二、案例演示1.引入库2.读入数据总结 前言 Webpack是前端构建工具 前端构建工具就是把开发环境代码转化称运行环境代码。开发环境的代码要通过混淆压缩后才能上线运行，这样代码占用内存较小， 一、Webpack 一般需要构建工具处理的几种情况 代码压缩 将js、css代码混淆压缩，代码体积更小，运行更快 编译语法 编
关于webpack打包图片不能显示的问题
张杰伦的博客
07-05 784
使用webpack打包图片时，图片无法正常显示 结合url-loader,file-loader,html-loader后还是不行，查阅资料后发现 因为url-loader默认使用es6模块化解析, 而html-loader引入图片是commonjs 解决办法将esModule设置为false, ...
webpack打包图片不显示问题
qq_44158369的博客
05-05 1715
给body添加一个div设置一张背景图片，以下为各个代码部分 打包不报错，但是浏览器打开不显示图片，而且打包之后dist文件夹下显示两张图片，一张可以打开，一张打不开。生成两张图片可能是css-loader版本不同，对引入背景图片的url的解析方式不一样，导致生成了两张图片（一个是正常由file-loader解析生成，一个仅由css-loader解析引入） 1.在webpack5中file-loader和url-loader已经被弃用，要使用它俩时，将模块类型设置为Javascri...
webpack打包之后，图片无法显示问题
flym_的博客
05-20 4037
编译打包之后，图片显示不出来？ 若图片在公共css样式中引入，打包之后将css抽离，引入路径发生改变，故图片显示不出。 解决方法：将图片引入写在代码里面
vue项目webpack打包后图片不展示问题
最新发布
吴佳强的博客
01-10 899
vue项目webpack打包后图片不展示问题
完美解决webpack打包css背景图片路径问题
11-20
本文将详细解析如何解决Webpack打包CSS背景图片路径问题。 首先，让我们分析问题所在。在Vue组件的样式部分，我们可能会写入如下的CSS代码： ```css background-image: url("../assets/img/icon_add.png"); ``` 在...
浅谈webpack打包过程中因为图片的路径导致的问题
08-28
浅谈webpack打包过程中因为图片的路径导致的问题 在本文中，我们将讨论webpack打包过程中因为图片的路径导致的问题，并提供相应的解决方案。 1. 问题背景 在使用webpack打包时，我们可能会遇到图片路径的问题。...
【webpack】使用webpack打包图片文件、打包时生成单独的css文件
wusq的博客
10-03 1545
使用webpack打包图片文件 在scr目录下创建image文件夹，并且添加几张图片 在main.js使用import方式引入所有图片，并且append到app节点下 // 引入图片资源 import i1 from './image/image1.png' import i2 from './image/image2.png' // 创建图片对象 let img1 = document.createElement('img') img1.src = i1 let img2 = document.cr
webpack 打包 img图片时怎么不显示
web_Baron的博客
04-10 294
解决方法：只需要在 url-loader 和 html-loader 中都写入esModule: false,少一个都不行哦！！！ 步骤一： 步骤二：
webpack打包图片时没报错但是不显示图片，教你一招解决
编程教培一线讲师
04-22 2641
在看webpack视频教学时因为老师的版本和自己的版本不一致导致在打包处理图片是一直显示不了图片，查询了一些技术论坛后才解决了这个困扰我好多天的问题 直接上源代码 看看我的目录 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
【webpack】webpack打包后, 静态图片资源不显示的若干个问题
每天进步一点点, 靠近小目标一点点~
11-15 3770
最近在搭建公司的前端组件库, vue写的, webpack打包后, 在项目中引用组件库 其中有个组件引用了静态图片资源, 然而打包后在项目中引用该组件的图片就不显示了 遇到了以下若干问题, 小小记录一下~
webpack打包之后背景图不显示的问题
weixin_30547797的博客
12-25 673
修改build/utils.js文件里面的ExtractTextPlugin，添加：publicPath: ‘…/…/’,具体代码如下： 转载于:https://www.cnblogs.com/sunery/p/10175053.html
关于webpack5打包图片不报错但是也不显示问题
前端小口袋
08-09 1735
我在使用 webpack : "^5.49.0"这个版本的时候，使用url-loader处理图片打包，这时候打包输出会有两个图片文件，一个是打包后的图片，一个图片内容是引入刚才的这个图片，比如他的内容是 最后导致打包图片不报错，但是也不显示，查阅官网后，发现该问题是由于webpack5版本太新，官方推荐使用asset module 资源模块替换loader 转自官网： asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。 asset/inline 导出
解决webpack打包后图片加载失败的bug（适用于所有本地静态资源）
vvv3171071的博客
10-28 1703
最左的图片是解决后加载成功的，另外三张是加载失败的。 原因：webpack把img当成是一种资源，所以使用时要先引进，给路径加上require()即可~ 解决方法： 数组的第一个对象的pic_url是加了require()的，第二个是没加的，对应最初那张页面效果。所以第一张能显示，第二到第四张加载失败。 上红框为能加载成功的图片的路径（打包到了dist目录下的assets静态资源文件夹下），下红框为加载失败的路径（依旧是本地的原路径） 全部url都加上require()，完工！（手动水印，哈哈） ..
解决webpack5打包html中图片后图片无法显示问题
rlrw_t的博客
06-17 1730
解决webpack5打包html中图片后图片无法显示问题。 错误代码如下： //loader的配置 module: { rules: [{ test: /\.(png|svg|jpg|jpeg|gif)$/, loader: 'url-loader', }, { test: /\.html$/,loader: 'html-loader' } ] }, 此时打包好的html文件中的img标签路径（为错误路径）： 解决方案 ------在尚硅谷的webpack5视频
vue项目使用webpack打包后,图片不显示
weixin_45032622的博客
11-01 5834
vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来.查看控制台也没有报错。错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置{.*)?$/,}我们这里将limit注掉之后，重新打包，图片便可以显示。
vue+webpack项目打包后背景图片加载不出来问题解决
weixin_42966151的博客
01-27 3132
vue+webpack项目打包后背景图片加载不出来问题解决
解决 Webpack 打包图片不报错也不显示问题，但其图片就是显示不出来的问题
狮子座的男孩
10-13 2180
1、问题描述： A、在 webpack.config.js 中也添加了代码为： { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: "url-loader?limit=16940" } B、在 ‘.css’ 文件中添加的信息为： .box { width: 300px; height: 300px; background: red url(../img/sass.png); } C、但此时就是
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值