0

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.

NegativeFriction
  • 527
  • 2
  • 14

2 Answers2

0

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

Colin Cheung
  • 148
  • 2
  • 13
  • Unfortunately the two typos you spotted were just typos I made while writing in my code (I have one computer for internet and another for coding, so I can't copy paste). The code on my development machine is identical to what you've written, and does not run. – NegativeFriction Oct 21 '19 at 16:36
  • You mentioned only the red x appearing, is this the `ErrorImage` you are referring to? Also have you tried using the same image for both conditions of the if? Perhaps your `myVar` is not what you expect – Colin Cheung Oct 21 '19 at 16:39
  • I have tried using the error image for both, and I have confirmed that the conditional statement is functioning as expected. If I change the CheckMark image to be ErrorImage, it will return the error image without issue. – NegativeFriction Oct 21 '19 at 16:43
  • I'm assuming you wish for the `CheckMark` image to be displayed, have you tried using `CheckMark` for both of the images? Double check that the file exists at the path location and do a chrome inspect on the webpage when it loads. You will want to check the console output for any error messages that might be helpful – Colin Cheung Oct 21 '19 at 16:49
  • I've tried using checkmark for both images. When i try to inspect it in Chrome, I get a blank image. I'm not sure what is causing a blank image. When I explore in my file explorer, I see a green check mark. – NegativeFriction Oct 21 '19 at 16:55
  • Regarding why that error message displays the data URI as a [base64 string](https://create-react-app.dev/docs/adding-images-fonts-and-files) Honestly I'm kinda stumped, it seems to be a webpack issue you're having. If you go to chrome inspect > sources then try file the file in question, see if it exists. – Colin Cheung Oct 22 '19 at 09:04
  • I'm using the webpack that came with create-react-app, and I haven't done anything to modify it on my own. Regardless, I wound up just using a unicode alert symbol/check mark rather than using clipart, and that seems to be working now. – NegativeFriction Oct 23 '19 at 11:20
0

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.

NegativeFriction
  • 527
  • 2
  • 14