时间戳

首页 > 解决方案 > （反应）PNG图像将导入，但不会显示

reactjs - （反应）PNG图像将导入，但不会显示

问题描述

我正在尝试创建一个帮助函数，该函数将返回两个图像之一——一个复选标记或一个红色错误图标，具体取决于用户输入。

我的标头代码如下所示

import ErrorImage from './../Assets/Error.png'
import CheckMark from './../Assets/CheckMark.png'

我的辅助函数如下所示：

   if(myVar){
return <img src={CheckMark} alt='CheckMark'/>
}
else{
return <img src={ErrorImage} alt='Error'/>
}

我很肯定我正确地导入了两者——它们位于相同的相对文件路径中，并且来自相同的页面源。奇怪的是，只有红色的 x 会加载。当我尝试遵循检查元素中的路径时，复选标记显示为空白图像。但是，当我在资产文件夹中打开复选标记时，我会看到我希望看到的复选标记。

作为参考，我将此图像用作复选标记，并将此图像用作错误图标。

我尝试将高度和宽度设置为任意大的数字，只是为了确保我没有创建大小为 0 的图像，并且我已将不透明度设置为 1，以防它由于某种原因是透明的。这些都没有使图像出现。

我能想到的就是它一定是导致此问题的图像的属性，但我尝试了四五个不同的复选标记图像，但都没有奏效。我不明白我做错了什么，而且我发现的所有支持文档都用于不正确地导入数据。据我所知，我正在正确导入这些数据。

编辑：我注意到的一个奇怪的元素。如果我 console.log 我的错误图标，我会得到一长串以“data: image/png.base64....”开头的文本。如果我 console.log 我的复选标记，我会得到“static/media/Checkmark.89156a。 png"，就是这样。错误图标的数据比复选标记多得多。

编辑 2：我仍然不知道是什么导致了这个问题，但我只是放弃了尝试导入图像并转而使用 Unicode 符号，这对我来说没有问题。

标签： reactjsimageimport

解决方案

似乎您的代码中有一些语法错误

标题应该是：

import ErrorImage from './../Assets/Error.png'
import CheckMark from './../Assets/CheckMark.png'

辅助函数应该是：

if(myVar){
  return <img src={CheckMark} alt='CheckMark'/>
}
else{
  return <img src={ErrorImage} alt='Error'/>
}

有关更多详细信息， 请参阅此StackOverflow 帖子

推荐阅读