(React) PNG Image will import, but won't display - reactjs

Question

I'm trying to create a helper function that will return one of two images-- either a check mark or a red error icon, depending on user input.
My header code looks like this
import ErrorImage from './../Assets/Error.png'
import CheckMark from './../Assets/CheckMark.png'
My helper function looks like this:
if(myVar){
return <img src={CheckMark} alt='CheckMark'/>
}
else{
return <img src={ErrorImage} alt='Error'/>
}
I'm positive that I'm importing both correctly-- they're in the same relative file path, and came from the same page source. The weird thing is, only the red x will load. The check mark is showing up as a blank image when I try to follow the path in inspect element. However, when I open the check mark in my assets folder, I get the check mark that I'd expect to see.
For reference, I'm using this image for the check mark and this image for the error icon.
I've tried setting the height and width to arbitrarily large numbers, just to make sure that I'm not creating an image with 0 size, and I've set the opacity to 1, in case it was transparent for some reason. Neither of these made the image appear.
All I can think of is that it must be a property of the image that is causing this issue, but I've tried four or five different check mark images, and none of them have worked. I don't understand what I'm doing incorrectly, and all of the supporting documentation I've found has been for improperly importing the data. So far as I can tell, I'm importing this data correctly.
Edit: One weird element that I've noticed. If I console.log my error icon, I get a long string of text beginning with "data: image/png.base64...." If I console.log my checkmark, I get "static/media/Checkmark.89156a.png" and that's it. I have much, MUCH more data for the error icon than the checkmark.
Edit 2: I still don't know what caused this issue, but I just abandoned trying to import images and swapped over to using Unicode symbols, and that's working for me without issue.

Answer 1

Seems like you have some syntax errors in your code
The header should be:
import ErrorImage from './../Assets/Error.png'
import CheckMark from './../Assets/CheckMark.png'
The helper function should be:
if(myVar){
return <img src={CheckMark} alt='CheckMark'/>
}
else{
return <img src={ErrorImage} alt='Error'/>
}
See this StackOverflow post for more details

Answer 2

The issue here was one of permissions, I believe. As I eventually learned, if I said
const checkMark = require('./../Assets/checkMark.png')
I could load the checkMark. It's a function of webPack. This post explains it well enough.