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

У меня есть некоторые проблемы с моими изображениями в моем реактивном проекте. На самом деле я всегда думал, что относительный путь к атрибуту 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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

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

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

Ответ 3

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

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

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

Ответ 4

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

<img src={window.location.origin + '/img/myImage.png'} />

Ответ 5

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

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

Ответ 6

Я бы порекомендовал использовать традиционный относительный путь. Вы можете использовать как это ниже в изображении. Мы можем поместить что-нибудь в эту public папку и настроить таргетинг на эту папку для доступа к images, videos и т.д. Эта настройка выполняется самой реакцией. Для этого храните ваши изображения в общей папке. Вот так...

enter image description here

И чем в вашем jsx.

<img src="images/pitbull-mark.png" />

Ответ 7

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

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

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

В 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} />

Ответ 8

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

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

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

Ответ 9

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

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

Ответ 10

Поместите логотип в общую папку, например, в 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 без npm run build root, запустив npm run build.