У мене є проблема з моїми зображеннями в моєму проекті реагування. Дійсно, я завжди думав, що відносний шлях до атрибуту 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-react, тоді ваша загальнодоступна папка доступна. Тому вам потрібно додати свою 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"

Приклад: \public\charts\a.png

У HTML:

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

У JavaScript:

Створюйте зображення в новому зображенні, динамічно:

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

Встановіть зображення в існуючий img з id як '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папки під час збирання. З publicHTML можна посилатися лише на файли всередині папки.

На відміну від "/img/logo.png" або "logo.png", "% PUBLIC_URL% / img / logo.png" буде працювати правильно як з маршрутизацією на стороні клієнта, так і з некореневою публічною URL-адресою. Дізнайтеся, як налаштувати некореневу загальнодоступну URL-адресу, запустивши npm run build.