изображения появляются в разработке, но не в производстве в «РЕАКТЕ»

Question

это мой первый вопрос. Я делаю свой первый настоящий сайт в React. (После нескольких месяцев обучения без "сборки пряжи" ....) Ответ, безусловно, очевиден, но я не могу найти ответа на rnet.

в разработке. Я импортирую свои изображения в этот способ:

import greg from 'src/assets/image/Grincheux.png';

Затем я использую его так:

<img className="photo_greg" alt="" src={greg} />

пока что это хорошо, с "началом пряжи" я вижу, как появляются мои изображения. Но когда я подключаюсь к сети после «сборки пряжи», изображений больше нет.

Я понимаю, что пути к изображениям были изменены, однако я не понимаю, что «сборка» не меняет пути из компонента.

Я попытался поместить путь прямо из «DIST», но понял, что это бесполезно .... ? вы можете сказать мне, что я пропустил?

(информации о создании inte rnet очень много, но в сети и эти ловушки ... ?)

большое спасибо

Answer 1

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

WRONG : <li><NavLink to="***advice-sheet/***about" title="Notre vision">Notre vision</NavLink></li>



Right : <li><NavLink to="/about" title="Notre vision">Notre vision</NavLink></li>

Answer 2

Я не уверен, но вы можете попробовать использовать относительные пути вместо абсолютных.

 // Instead of absloute path
import greg from 'src/assets/image/Grincheux.png';

// Use relative path depending on your folder structure. "../../" is for example,
// you should replace according to your folder structure
import greg from '../../image/Grincheux.png';