Реагировать на навигацию по папкам импорта

Question

Я пытаюсь импортировать изображения из папки ресурсов в моей папке sr c в моем приложении реагирования, но по какой-то причине путь не распознается.

Моя структура папок выглядит следующим образом:

|src
 |Assets
 |Common
 |Components

Я пытаюсь импортировать изображение, расположенное в папке ресурсов, из папки компонентов. Мне удалось выполнить импорт из моей общей папки в файлы в папке компонентов, выполнив следующие действия:

import * as Constants from '../Common/Constants';

Однако выполнение этой же структуры при загрузке изображений не сработало

<img src = '../Assets/myimg.png'></img>

Что я делаю не так?

Спасибо

Answer 1

В своем коде вы предоставляете источник изображения на основе местоположения вашего приложения React, которое не связано ни с местоположением root веб-приложения, ни с media или stati c расположение файлов (настраивается), поэтому браузер не будет знать, как его отобразить. В зависимости от того, какой сервер вы используете (nginx, Express), вам необходимо настроить stati c и / или media файлов, а затем укажите в вашем источнике изображения в зависимости от того, как вы настроили.

В вашей текущей ситуации вы можете сделать следующее:

Импорт

const reactImage = require("../Assets/myimg.png");

И затем использовать его:

<img src={reactImage.default} />

Если у вас был носитель файлы, уже настроенные на вашем сервере и правильно разрешающие, это будет просто

<img src="/media/Assets/myimg.png" />

Предполагая, что media местоположение уже настроено и указывает на родительский каталог ваших Assets .

В вашем примере вы предполагали, что относительный путь импорта React и источника изображения, жестко закодированного в тег изображения, одинаковы, но на самом деле это не так.