Правильный путь для img на React.js

135

У меня есть некоторые проблемы с моими изображениями в моем реактивном проекте. На самом деле я всегда думал, что относительный путь к атрибуту src основан на файловой архитектуре.

Вот моя файловая архитектура:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

Однако я понял, что путь построен на URL-адресе. В одном из моих компонентов (например, в file1.jsx) у меня есть следующее:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

Как можно решить эту проблему? Я хочу, чтобы в любой форме маршрутов, обрабатываемых реагирующим маршрутизатором, все изображения могли отображаться с одинаковым путем.

onedkr
источник
1
просто укажите прямо на изображение, не используйте ../ что угодно
omarjmh 05
4
Вам нужно использовать require. Прочтите этот ответ на SO для получения дополнительной информации.
сегодня
Надеюсь, этот ответ поможет вам
найти

Ответы:

73

Вы используете относительный URL, который относится к текущему URL, а не к файловой системе. Вы можете решить эту проблему, используя абсолютные URL

<img src ="http://localhost:3000/details/img/myImage.png" />

Но это не очень удобно, когда вы развертываете сайт www.my-domain.bike или любой другой сайт. Лучше было бы использовать URL относительно корневого каталога сайта

<img src="/details/img/myImage.png" />

prekolna
источник
1
Спасибо, я хотел бы подчеркнуть, /что предшествует details(vs ./detailsи т. Д., Для других, которые могут объединить два).
user1322092
1
Даже у меня не работает. Я использую reactjswith cordovaи использую ES5как eslint
Джимит Патель
Хотя и это, и решение claireablani работают, claireablani - это то, что рекомендуют документы create-react-app. Они перечисляют ряд преимуществ по сравнению с сдачи ресурсов в общественном facebook.github.io/create-react-app/docs/...
Асир Нуэйми
@ user1322092 прав. Запомни это /images/popcorn.pngи нет ./images/popcorn.png. У меня работали со всеми маршрутами и прочим.
Nuhman
335

В create-react-appотносительных путях для изображений, похоже, не работают. Вместо этого вы можете импортировать изображение:

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}
claireablani
источник
15
как насчет динамических изображений, например, на которые есть ссылка в файле json в приложении create-response-app?
zok 02
2
@zok Я думаю, вы бы экспортируете переменную из файла JSON, импортируете переменную в свой компонент. Затем вы можете ссылаться на него как обычно. например, export const my_src = variable_here, import {my_src} из my_file и src = {my_src}.
claireablani
1
import './styles/style.less'; **import logo from './styles/images/deadline.png';**Я получаю сообщение об ошибке в модуле 2-й строки, который не найден, пока существует изображение и путь правильный.
Hitendra
Этот метод также подтверждается файлом survival.js, если вы хотите взглянуть на один из основных методов автора webpack. Он также упоминает, что вы можете использовать babel-plugin-transform-react-jsx-img-import, чтобы избежать необходимости импортировать изображение каждый раз, когда вы ссылаетесь на изображение.
Andre
2
Не в этом, он решает только проблему с изображением, но не решает проблему с путями .. Ответ Димы Гершмана - это фактическое решение реакции для пути к любому файлу img или еще
Сами
130

Если для создания проекта вы использовали create-реакции-приложение, то ваша общая папка доступна. Так что вам нужно добавить вашу imageпапку в общую папку.

общественности / изображения /

<img src="/images/logo.png" />

Рубель Хасан
источник
Я собирался задать вопрос, но ЭТОТ ответ решил мою проблему !!! Должен быть отмечен как ответ. Спасибо!!! +1
Si8 08
Это сработало для меня. Просто помните, что вам нужно перезапустить приложение, если вы добавили новое изображение в общедоступный каталог.
awasik
Это действительно быстрый способ справиться с ситуациями, но он будет работать, только если вам не нужны относительные URL-адреса. Например, если вы обслуживаете свое приложение на www.example.com/react-app, общедоступная папка будет доступна на www.example.com, без react-app. Это может вызвать проблемы, поэтому принятый ответ будет правильным. Источники: добавление ресурсов и использование общей папки
Александру Пирву,
44

С create-react-appесть публичная папка (с index.html ...). Если вы разместите свой «myImage.png» там, скажем, в подпапке img , то вы можете получить к ним доступ через:

<img src={window.location.origin + '/img/myImage.png'} />
Дима Г
источник
4
Это следует отметить как правильный ответ, потому что на самом деле это решение reactjs для всех типов путей к любым файлам
Сами
Я не понимаю, почему вы думаете, что это правильный ответ. Я просто попробовал этот ответ, и ответ Клэрэблани и ответ Клэр сработали, а это не так. Этот ответ работает, только если изображение находится в общей папке. Должны ли мои изображения помещаться в общую папку? @Sami
Мадерас
Да, @Maderas, во-первых, этот ответ такой же, как принятый => просто удалив {} и базовый URL-адрес, вы можете просто использовать src = '/ relative path of image' или src = 'absolute path of image' Что еще в этом ответ заключается в том, что он поддерживает переменный путь для любого изображения
Сами
Пока работает у меня как шарм. Больше ничего не делал! И я пробовал практически все. Спасибо!
Мария Кэмпбелл,
32
  1. Создайте папку изображений внутри src (/ src / images) и сохраните в ней свое изображение. Затем импортируйте это изображение в свой компонент (используйте свой относительный путь). Как ниже-

    import imageSrc from './images/image-name.jpg';

    А затем в вашем компоненте.

    <img title="my-img" src={imageSrc} alt="my-img" />

  2. Другой способ - хранить изображения в общей папке и импортировать их по относительному пути. Для этого создайте папку с изображениями в общей папке и храните в ней свое изображение. А затем в своем компоненте используйте его, как показано ниже.

    <img title="my-img" src='/images/my-image.jpg' alt="my-img" />

    Оба метода работают, но рекомендуется первый, потому что он более чистый, а изображения обрабатываются веб-пакетом во время сборки.

Mustkeem K
источник
2
это помогло мне :)
Рафаэль
Это не сработает, косая черта (/) необходима в начале для указания относительного пути, например: "/images/pitbull-mark.png"
Джереми Ри
вы пробовали тот, который был упомянут в ответе? Это тоже должно сработать.
Mustkeem K
26

в моем случае работает и следующий код.

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>
Содхи Сааб
источник
1
Это сработало для меня. Это работает, если вы НЕ хотите хранить изображения в
общей
13

Некоторые старые ответы не работают, другие хороши, но не объясняют тему вкратце:

Если изображение находится в общедоступном каталоге

Пример: \public\charts\a.png

В HTML:

<img id="imglogo" src="/charts/logo.svg" />

В JavaScript:

Создайте изображение для нового img, динамически:

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';  

Установить изображение как существующий img с идентификатором img1 динамически:

document.getElementById('img1').src = 'charts/a.png';

Если изображение находится в каталоге src:

Пример: \src\logo.svg

В JavaScript:

import logo from './logo.svg';  
img1.src = logo;  

В jsx:

<img src={logo} /> 
Манохар Редди Поредди
источник
3

Добавление файлового загрузчика npm в webpack.config.js в соответствии с его официальной инструкцией по использованию, например:

config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

работал на меня.

Древесная рыба Чжан
источник
3

Импортируйте изображения в свой компонент

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

И назовите имя изображения на изображении src = {RecentProjectImage_3} как объект

 <Img src={RecentProjectImage_3} alt="" />
Md. Rana
источник
2

Друг показал мне, как сделать это следующим образом:

«./» работает, когда файл, запрашивающий изображение (например, «example.js»), находится на том же уровне в структуре дерева папок, что и папка «images».

AdamJSim
источник
1

Поместите логотип в свою общую папку, например, в public / img / logo.png, а затем укажите в общей папке% PUBLIC_URL%:

<img src="%PUBLIC_URL%/img/logo.png"/>

Использование% PUBLIC_URL% в приведенном выше примере будет заменено URL-адресом publicпапки во время сборки. Только файлы внутриpublic HTML можно ссылаться папки.

В отличие от «/img/logo.png» или «logo.png», «% PUBLIC_URL% / img / logo.png» будет правильно работать как с маршрутизацией на стороне клиента, так и с общедоступным URL-адресом без полномочий root. Узнайте, как настроить общедоступный URL без полномочий root, запустив npm run build.

Сами Старт
источник