Условный рендеринг и путь к изображению в React JS
Я действительно не понимаю ни одного момента. Допустим, у меня есть компонент, который условно отображает такие данные:
<div>
{isLoading ? <img src="../pathname/img.jpg" alt="loading" /> : <Page />}
</div>
Изображение не отображается таким образом, отображается значок сломанного файла. Однако, если я импортирую то же изображение, оно работает нормально:
import loadingImage from "../pathname/img.jpg"
<div>
{isLoading ? <img src={loadingImage} alt="loading" /> : <Page />}
</div>
Я использую, npm startи мой редактор - VS Code. Знаете ли вы, что может быть причиной его импорта, а не просто указать имя пути, srcдаже если путь такой же? Указанный мной путь и имя файла были на 100% правильными в первом примере.
Ответы
Это происходит потому, что ваше изображение, вероятно, находится вне publicпапки.
Вы можете добавить активы в общую папку, и тогда у вас будет к ней доступ.
Например, для приведенного ниже кода вам понадобится pathnameпапка с img.jpg внутри publicпапки.
<img src="../pathname/img.jpg" alt="loading" />
Но лучший способ сделать это - использовать импорт в файлы JavaScript. Этот механизм дает ряд преимуществ:
- Сценарии и таблицы стилей минифицируются и объединяются во избежание дополнительных сетевых запросов.
- Файлы включены в комплект
- Отсутствующие файлы вызывают ошибки компиляции вместо ошибок 404 для ваших пользователей.
- Имена файлов результатов включают хэши содержимого, поэтому вам не нужно беспокоиться о том, что браузеры кэшируют свои старые версии.
С import, когда страница отображается, вы увидите sometinhg как это на картинке: src="/static/media/img.xxxxx.jpg". Это потому, что использование импорта сообщает webpack о необходимости включения этого файла в пакет.
Вы можете проверить больше здесь - добавление-изображений-шрифтов-и-файлов и здесь- использование-общедоступной-папки
Вам не хватает фигурных скобок. Это будет работать:
<div>
{isLoading ? <img src={'../pathname/img.jpg'} alt='loading' /> : <Page />}
</div>