所以，我在我的React应用上有几张图片，但是在运行"npm run build"创建优化构建后，图片不显示了。为什么？
cbjzeqam1#
请提供更多关于该问题的详细信息。
5gfr0r5j2#
据我所知，react-scripts存在一个已知问题。请尝试使用较旧的版本，例如3.4.4。
57hvy0tb3#
@Hrishi1999 你能给我们提供一下你提到的问题的链接吗？另外，降级并不是一个很好的解决方案，因为CRAv3.4.4中包含了一些漏洞，我们希望升级到v4。这个问题似乎根源在于CRA4打包图像的方式，或者它引用它们的方式。以下图形显示了使用ES6 import添加的SVG生成的DOM:
正如您所看到的，img 标签的 src 属性被设置为 [object Module],而不是实际路径。我怀疑这不是问题，如果图像在本地仓库中(因此没有被测试捕获)。这种推测的原因是我从库(另一个仓库)导入图像并指向src文件夹中的文件时，它可以正常工作。但是，如果引用dist文件夹(即编译位置),它会将对象插入到src属性中，如图所示。如果不是因为我们从给定的库中使用的某些组件也包含图像，并且这些图像也是损坏的，但无法以相同的方式“修复”，那么这并不是一个大问题。
img
src
[object Module]
yiytaume4#
这个问题：#9992
hwamh0ep5#
所以，我在我的React应用中有几张图片，但是在运行"npm run build"创建优化构建后，图片不显示了。为什么？在img src内部使用".default",它将解决这个问题。示例：之前 => src={require(../../assests/images/${degree.logo_path})}之后 => src={require(../../assests/images/${degree.logo_path}).default}
../../assests/images/${degree.logo_path}
5条答案
按热度按时间cbjzeqam1#
请提供更多关于该问题的详细信息。
5gfr0r5j2#
据我所知，react-scripts存在一个已知问题。请尝试使用较旧的版本，例如3.4.4。
57hvy0tb3#
@Hrishi1999 你能给我们提供一下你提到的问题的链接吗？
另外，降级并不是一个很好的解决方案，因为CRAv3.4.4中包含了一些漏洞，我们希望升级到v4。
这个问题似乎根源在于CRA4打包图像的方式，或者它引用它们的方式。
以下图形显示了使用ES6 import添加的SVG生成的DOM:
正如您所看到的，
img标签的src属性被设置为[object Module],而不是实际路径。我怀疑这不是问题，如果图像在本地仓库中(因此没有被测试捕获)。这种推测的原因是我从库(另一个仓库)导入图像并指向src文件夹中的文件时，它可以正常工作。但是，如果引用dist文件夹(即编译位置),它会将对象插入到src属性中，如图所示。
如果不是因为我们从给定的库中使用的某些组件也包含图像，并且这些图像也是损坏的，但无法以相同的方式“修复”，那么这并不是一个大问题。
yiytaume4#
这个问题：#9992
hwamh0ep5#
所以，我在我的React应用中有几张图片，但是在运行"npm run build"创建优化构建后，图片不显示了。为什么？
在img src内部使用".default",它将解决这个问题。
示例：
之前 => src={require(
../../assests/images/${degree.logo_path})}之后 => src={require(
../../assests/images/${degree.logo_path}).default}