Я пытаюсь создать вспомогательную функцию, которая будет возвращать одно из двух изображений - либо галочку, либо красный значок ошибки, в зависимости от ввода пользователя.
Мой код заголовка выглядит так
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'/>
}
Я уверен, что я правильно импортирую оба файла - они находятся в одном и том же относительном пути к файлу и получены изтот же источник страницы. Странная вещь, только красный х будет загружаться. Флажок отображается как пустое изображение, когда я пытаюсь следовать пути в элементе проверки. Однако, когда я открываю галочку в папке с активами, я получаю галочку, которую я ожидаю увидеть.
Для справки, я использую это изображение для галочки и это изображение для значка ошибки.
Я пробовал установитьвысота и ширина для произвольно больших чисел, просто чтобы убедиться, что я не создаю изображение с размером 0, а для непрозрачности я установил значение 1, если по какой-то причине оно было прозрачным. Ни один из них не заставил изображение появиться.
Все, что я могу думать, это то, что это должно быть свойство изображения, которое вызывает эту проблему, но я пробовал четыре или пять различных изображений галочек, и ни одно из них не сработало. Я не понимаю, что я делаю неправильно, и вся подтверждающая документация, которую я нашел, была связана с неправильным импортом данных. Насколько я могу судить, я правильно импортирую эти данные.
Редактировать: один странный элемент, который я заметил. Если я укажу на иконку ошибки console.log, я получу длинную строку текста, начинающуюся с «data: image / png.base64 ....». Если я укажу контрольную запись в своей галочке, я получу «static / media / Checkmark.89156a»png "и это все. У меня гораздо, намного больше данных для значка ошибки, чем для галочки.
Редактировать 2: Я до сих пор не знаю, что вызвало эту проблему, но я просто отказался от попыток импорта изображений и переключился на использование символов Юникодаи это работает для меня без проблем.