Пути к изображениям преобразуются в URI данных вместо URL

Question

У меня есть базовое приложение React, настроенное с помощью инструмента Create-React-App.

У меня есть изображения в папке с изображениями: /src/img/logo.png

Iя включаю его в один из моих компонентных файлов JS (скажем, он находится в /src/Login.js) следующим образом:

import logo from "../img/logo.png";

Я встраиваю их в свой код следующим образом:

<img src={logo} />

Когда я смотрю на отрендеренную страницу, я вижу, что атрибут "src" этого изображения имеет URI данных. Как я могу заставить приложение генерировать URL для этого изображения вместо URI данных?

Answer 1

Почему вы импортируете изображение с помощью import, вы можете напрямую использовать путь или взять этот путь в одной переменной и передать его в src следующим образом:

 var imgUrl = "../img/logo.png"; 

 <img src={imgUrl} />