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

Question

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

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

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

15199 10

javascript reactjs webpack

10 ответов:

Comments

Ничего не найдено.

prekolna · Accepted Answer · 2017-07-20 07:52:52

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

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

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

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

claireablani · Accepted Answer · 2016-10-09 20:24:09

Не пытаясь ответить на вопрос - просто обратите внимание, что в create-react-app относительные пути для изображений, похоже, не работают. Вместо этого можно импортировать изображения.
import logo from './logo.png' // relative path to image 

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

Dima Gershman · Accepted Answer · 2018-03-08 12:30:09

С create-react-app здесь общественные (С .HTML-код...). Если вы разместите свой "myImage.ПНГ" там, говорят, под img подпапка, то вы можете получить к ним доступ через:
<img src={window.location.origin + '/img/myImage.png'} />

Rubel hasan · Accepted Answer · 2018-08-13 20:20:00

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

public / images/

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

Sodhi saab · Accepted Answer · 2018-04-12 02:16:08

в моем случае следующий код тоже работает.
<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

Treefish Zhang · Accepted Answer · 2018-04-08 01:57:09

добавлять file-loader npm в webpack.конфиг.js в соответствии с его официальной инструкцией по использованию так:
config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);
работал для меня.

Must keem · Accepted Answer · 2018-09-18 08:36:56

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

и чем в вашем jsx.
<img src="images/pitbull-mark.png" />

AdamJSim · Accepted Answer · 2018-03-04 03:49:58

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

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

Manohar Reddy Poreddy · Accepted Answer · 2018-08-15 11:13:56

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

если изображение находится в каталоге "public"

пример: \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} /> 

Sami Start · Accepted Answer · 2018-08-19 19:28:34

поместите логотип в общую папку, например, public/img / logo.png, а затем обратитесь к общей папке как %PUBLIC_URL%:
<img src="%PUBLIC_URL%/img/logo.png"/>
использование %PUBLIC_URL% в приведенном выше будет заменено URL-адресом public папка во время сборки. Только файлы внутри public на папку можно ссылаться из HTML.

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