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

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

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

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

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

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

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

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

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

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

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

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

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

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

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" />

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

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

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

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

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

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

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

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

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

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

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

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

 <Img src={RecentProjectImage_3} alt="" />

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

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

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