it-swarm.com.ru

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

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

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

components
    file1.jsx
    file2.jsx
    file3.jsx
conainter
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 works, images are not displayed

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

83
onedkr

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

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

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

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

58
prekolna

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

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

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

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

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

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

59
Rubel hasan

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

<img src={window.location.Origin + '/img/myImage.png'} />
35
Dima Gershman

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

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

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

enter image description here

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

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

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

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

Пример: \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} /> 
4
Manohar Reddy Poreddy

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

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

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

3
Treefish Zhang

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

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

1
AdamJSim

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

0
Sami Start