Reactjs İmage 源看起来像 src="[object Module]"

【问题标题】：Reactjs İmage sources seeming like src="[object Module]"Reactjs İmage 源看起来像 src="[object Module]"
【发布时间】：2021-04-13 10:23:40
【问题描述】：

在看起来像 src="[object Module]" 的 Reactjs 图像源中。但不知何故 .svg 文件没有这个问题，它只发生，一些 .png 文件即使是静态文件。例如：

<div className="flex-row stores-main">
                <a
                    href="https://play.google.com/store/apps/details?id=com.xxx"
                    target="_blank"
                >
                    <img
                        alt="play-store"
                        className="play-store"
                        src={require("../../assets/stores/google-play-badge.png")}
                    />
                </a>
                <a
                    href="https://apps.apple.com/tr/app/verified/xxx"
                    target="_blank"
                >
                    <img
                        alt="apple-store"
                        className="apple-store"
                        src={require("../../assets/stores/apple-store-badge.png")}
                    />
                </a>
            </div>

在这里播放商店图像渲染正常，但苹果商店图像没有渲染，我确信路径是正确的。

【问题讨论】：

标签： html reactjs image webpack

【解决方案1】：

我不确定您是如何在 html 插件中或通过加载器加载此模板的 webpack，但看起来 require('thing') 返回一个模块对象，其中包含 default 属性作为您需要的字符串路径。

src={require("../../assets/stores/apple-store-badge.png").default}

我猜你目前已经为加载程序启用了esModule 对象，这可能是导致问题的file-loader 或url-loader。如果是这样，您只需将其关闭，然后它会为您导出正确的 url（不作为模块导出）

【讨论】：