После деплоя React-приложения на gh-pages не выводятся изображения. На localhost все работает
Изображения лежат d:\Phones\public\media\img.jpg.
Компоненты, указывающие путь к изображениям, лежат на d:\Phones\src\components\component.js
Вызов изображений из одного из компонентов следующий:
import React from "react";
export default ({ user, update, index}) => {
return (
<tr onClick={() => update({active: index})}>
<td><img src={`../../media/${user.image}.jpg`} alt="" className="user-image" /></td>
<td>{user.name}</td>
<td>{user.phone}</td>
</tr>
);
}
Помогите правильно вызвать изображения, чтобы они отображались после деплоя на gh-pages.
Ответы (1 шт):
Автор решения: Август
→ Ссылка
суть в том, что Вы указывали относительный путь для изображения в проекте, который на стадии разработки и еще не собран. после сборки проекта структура файлов, конечно же, меняется, но Ваши пути для изображений остаются те же.
для этого указывайте src изображения как импортируемый модуль, например:
<img
src={require(`../../media/${user.image}.jpg`)}
alt=""
className="user-image"
/>