项目中有时候为什么加载不出来图片

最新推荐文章于 2024-09-15 16:39:23 发布

IT大天使

最新推荐文章于 2024-09-15 16:39:23 发布

阅读量1.6k

点赞数

分类专栏： react 文章标签： node.js javascript vue.js

本文链接：https://blog.csdn.net/qq_31444707/article/details/120202635

版权

react 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文探讨了在项目中使用require或import加载图片时遇到的问题，由于webpack默认配置，图片路径会变为[object Module]导致失效。解决方案是在webpack.config.js中调整图片加载配置，将esModule设置为false。同时，文章简单介绍了AMD、CMD和CommonJS的区别，AMD和require.js的异步预加载特性。

摘要由CSDN通过智能技术生成

1.使用Require加载

在项目中我们一般直接写地址途径是加载不出来图片的，如：

<img src='../../assets/about_logo.png' />

可以这样写

<img src=require('../../assets/about_logo.png') />

或者
import  imgURL  from  '../../assets/about_logo.png'

<img src={imgURL} />

2.这个问题导致的原因其实和你的webpack中的配置有关系

在webpack中我们导出模块都是使用的module.exports 的方式导出的，没错看到这里你们肯定就联想到了AMD和CMD以及CommonJS这部分，使用require加载图片之后我们的图片地址就会变成一个[object Module],这才导致图片地址失效的问题，解决这个办法就是这时我们需要在webpack.config.js里面配置下，找到图片配置的地方,将esModule修改成false就可以了

*注：require.js在申明依赖的模块时会在第一之间加载并执行模块内的代码：我觉得这里这么说更通俗形象一点：require.js在申明依赖的模块时会在第一之间加载并解析模块内的代码，也就是说amd规范和require.js 其实是异步预加载，无论这个模块是否被使用这个模块都会被提前加载过来并解析。而cmd规范的seajs则是，在用到的时候才去require‘加载’，并且需要等模块解析后才能继续使用这个模块，才能向下执行代码（同步）