Question

我正在尝试创建一个辅助函数，该函数将根据用户输入返回两个图像之一（一个复选标记或一个红色错误图标）。

我的标头代码如下

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会被加载。当我尝试遵循inspect元素中的路径时，复选标记显示为空白图像。但是，当我在资产文件夹中打开复选标记时，我得到了希望看到的复选标记。

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

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

我能想到的是，它必须是导致此问题的图像的属性，但是我尝试了四到五个不同的复选标记图像，但它们都没有起作用。我不明白自己在做什么错，我发现的所有支持文档都是关于不正确导入数据的。据我所知，我正在正确导入此数据。

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

编辑2：我仍然不知道是什么引起了这个问题，但是我只是放弃了尝试导入图像并换成使用Unicode符号的方法，这对我来说毫无问题。

Answer 1

好像您的代码中有一些语法错误

标题应为：

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 post

Answer 2

我认为，这里的问题是权限之一。最终我了解到，如果我说

const checkMark = require('./../Assets/checkMark.png')

我可以加载选中标记。这是webPack的功能。 This帖子对此进行了充分解释。

（反应）将导入PNG图片，但不会显示

2 个答案: