Почему мой путь к моему изображению не работает в реакции?
Вот мой макет папки
src (folder)
images (folder)
alligators (folder)
Alligator 1.svg (svg file)
main.js (javascript file)
А вот моя строка кода в файле main.js:
<img src = {require("./images/alligators/Alligator 1.svg")} alt = "alligator illustrator" />
Я не получаю никаких ошибок, я просто отображаю свой альтернативный текст, а мое изображение не отображается.
Что, кажется, моя проблема с моим путем?
Я также только что попробовал {} curly без «require», но результат тот же. Пробовал переименовывать Alligator 1 без пробела, но опять же результат тот же.
Если мой код правильный, по каким другим возможным причинам это может происходить?
@squillman спасибо, руководство import alligator from 'path' работает, а затем меняет его на src = {alligator}, но require-> import ничего не сделал. Я не уверен, почему ручной импорт работает, но не импорт изображений, так как это тот же самый путь
попробовать <img src = "./images/alligators/Alligator 1.svg" alt = "alligator illustrator" /> для меня это работает. и не нравится пробел в имени файла.
@romanown не работает. это работает, когда я нахожусь в своих файлах html/css, но не реагирую, не знаю почему. и это тот же путь, плюс-минус небольшая разница в синтаксисе
это потому, что вы показали структуру каталогов и используете ее при проектировании. а изображения должны быть размещены в той структуре, которая получается после компиляции. где находится получившийся пучок. ссылка на который находится в html файле. но вам все же удобнее наверное сделать как в принятом ответе.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Обновите свой код, чтобы импортировать изображение, а затем используйте его в src следующим образом:
import alligator from './images/alligators/Alligator 1.svg';
...
<img src = {alligator} alt = "alligator illustrator" />
При импорте ваш файл сохраняется в alligator и затем доступен для использования React. Затем React разрешает его в вашем теге img.
в react.js вы можете поместить свои изображения в общую папку (тот же каталог, что и src), а затем просто передать его по пути по умолчанию, например: src = "/image.svg"
Да, но я бы хотел, чтобы мои файлы были организованы, а не хранились в папке SRC.
Что произойдет, если вы замените
requireнаimport? Если это не сработает, добавьтеimport alligator from './images/alligators/Alligator 1.svg'вверху файла и измените код наsrc = {alligator}.