Не могу загрузить изображение в index.js в React

Question

Проблема:

Мое изображение не будет отображаться при отображении кода.Он возвращает значок только тогда, когда изображение загружено неправильно.Я прочитал, что мне нужно добавить свое изображение в общую папку, чтобы веб-пакет не влиял на путь, но я не знаю, как правильно добавить его в общую папку.Это специальный путь к этой общедоступной папке, или мне нужно сделать что-то конкретное, чтобы сделать папку общедоступной?

Я пробовал следующее:

• Добавитьimage в папку с именем public и импортируйте файл в index.js следующим образом:

  import img from '../../public/myimage.jpg';
  
  <img src={img} />
  

• , а также попытайтесь просто добавить путь непосредственно внутри src:

  <img src="../../public/myimage.jpg" />
  

• и я также попробовал то же самое с изображением в той же папке, что и файл index.js, с этим путем:

  './myimage.jpg"
  

но эти усилия не сработали.Как я могу добавить изображение в свой код React?

Answer 1

Когда вы используете папку public, добавьте process.env.PUBLIC_URL перед именем файла изображения.

Из документов (относительно Webpack):

Если вы поместите файл в общую папку, он не будет обрабатываться Webpack.Вместо этого он будет скопирован в папку сборки без изменений.Для ссылки на ресурсы в общей папке необходимо использовать специальную переменную с именем PUBLIC_URL.

Пример:

return <img src={process.env.PUBLIC_URL + '/myimage.jpg'} />;