在使用Webpack打包本地img图片文件时图片加载失败 [object Module] 404 (Not Found)

以你之姓@ 2023-05-21 07:08 12阅读 0赞

# 问题描述 #

在Vue组件里引入了一张本地的图片：

<template>
    	<div>
    		<img src="../../images/test.png">
    	</div>
    </template>

然后图片就挂了：  
![在这里插入图片描述][20200430095443663.png]  
顿时一脸懵 因为图片在本地是有的 而且Ctrl+左键也能访问

发现src变成了\[**object Module**\]：

<img src="[object Module]">

并且在页面控制台打印了一句异常信息：`GET http://localhost:端口/[object%20Module] 404 (Not Found)`

# 原因 #

我是用url-loader打包的：

{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=10240&name=[name].[ext]"}

在url-loader内部封装了file-loader 而file-loader在**新版本**中**esModule**属性默认为`true` 即**默认使用ES模块语法**  
导致了造成了引用图片文件的方式和以前的版本不一样 引入路径改变了 自然找不到图片

# 解决方法 #

在webpack的配置文件webpack.config.js中 修改**esModule: `false`**  
关闭ES模块语法即可：

{test:/\.jpg|png|gif|bmp|jpeg$/,use:"url-loader?limit=10240&name=[name].[ext]&esModule=false"}

或是：

{
    test: /\.jpg|png|gif|bmp|jpeg$/,
    use: [
    	{
    		loader: 'url-loader',
    		options: {
    			limit:10240,
    			name:"[name].[ext]",
    			esModule: false
    		}
    	}
    ]}

--------------------

[20200430095443663.png]: /images/20230521/dbdb73a56385478e9354a475335c2344.png

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 img图片加载失败？

问题场景在工作中经常会使用< img >标签进行图片展示，但是经常有图片加载失败的情况发生（图片地址不存在、图片已经删除等）。场景再现图片加载失败时的用户体

忘是亡心i/ 2024年02月19日 18:09/ 0 赞/ 64 阅读

相关 webpack打包html里面img后src为“[object Module]”问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me

﹏ヽ暗。殇╰゛Y/ 2023年06月26日 12:28/ 0 赞/ 7 阅读

相关在使用Webpack打包本地img图片文件时图片加载失败 [object Module] 404 (Not Found)

问题描述在Vue组件里引入了一张本地的图片： <template> <div> <img src="../../images/test.

以你之姓@/ 2023年05月21日 07:08/ 0 赞/ 13 阅读

相关 img onerror 图片加载失败显示默认图

img onerror 图片加载失败显示默认图  <img src="images/logo.png" onerror="javasc

深藏阁楼爱情的钟/ 2023年01月23日 09:53/ 0 赞/ 238 阅读

相关 C#加载使用图片方法二本地图片

-------------------- 项目需要使用的图片 ![在这里插入图片描述][20210608102101172.png]![在这里插入图片描述][202106

矫情吗；*/ 2022年10月05日 08:56/ 0 赞/ 978 阅读

相关 js处理img标签加载图片失败，显示默认图片

1.第一种方法：如果已经引入了jquery插件，就很好办。没有的话，如果实在需要，可以附上代码： script(type='text/javascript',

Myth丶恋晨/ 2022年08月20日 13:25/ 0 赞/ 579 阅读

相关 android使用ImageView加载本地SdCard图片和加载网络图片

转载自：http://longshuai2007.blog.163.com/blog/static/1420944142011611105732712/ andr

深碍√TFBOYSˉ_/ 2022年08月01日 13:40/ 0 赞/ 298 阅读

相关当原图片加载失败时，如何让图片加载上我们默认给的图片

我们可能会遇到这样的问题，当页面中的图片的加载失败时，我们想要该图片加载我们给的默认的图片，我在这里分享一下几种做法，希望对大家有所帮助。 1、在img标签中加上 οnerr

曾经终败给现在/ 2022年06月17日 07:16/ 0 赞/ 273 阅读

相关 fresco加载本地图片

在java代码中： imageView.setImageURI(UriUtil.parseUriOrNull("file://" + filePath));

﹏ヽ暗。殇╰゛Y/ 2022年06月10日 11:50/ 0 赞/ 264 阅读

相关 Jsp<img>标签加载中文图片失败

Jsp中<img>标签加载中文名字的图片失败解决办法，将img标签的src路径给一个Servlet负责显示图片即可例子： <img src="userPhotos

古城微笑少年丶/ 2022年04月06日 04:44/ 0 赞/ 337 阅读