Мое приложение React.js опубликовано, но мои ресурсы изображений в каталоге images (/assets/images/) не развернуты.

Структура опубликованного сайта:

enter image description here

После сборки приложения с помощью npm run build:

enter image description here

Актив-manifest.json:

enter image description here

Структура приложения React:

enter image description here

0
ismailalabou 4 Дек 2020 в 23:34

1 ответ

Лучший ответ

Я только что нашел ваш сайт и проверил источник. Если вы проверите свою отображаемую страницу в инструментах разработчика, ваши изображения будут отображаться как <img src="[object Module]">.

Похоже, вы используете create-react-app и использовали require для импорта своих изображений. В последней версии CRA require возвращает модуль ES вместо строки, потому что в file-loader опция esModule включена по умолчанию.

Поэтому убедитесь, что вы импортируете свои изображения одним из следующих способов:

const image = require('../path/to/image.jpg').default;
// OR
import image from '../path/to/image.jpg';

Изменить:

Когда вы отправили URL-адрес своего репо, я вижу, что вы импортировать такие изображения:

<div className="greeting-image-div">
  <img
    alt="saad sitting on table"
    src={require('../../assets/images/manOnTable.svg')}
  ></img>
</div>

Как я упоминал выше, вам нужно либо получить свойство default модуля require d:

<div className="greeting-image-div">
  <img
    alt="saad sitting on table"
    src={require('../../assets/images/manOnTable.svg').default}
  ></img>
</div>

... или используйте import:

import manOnTable from '../../assets/images/manOnTable.svg'

// ...

<div className="greeting-image-div">
  <img
    alt="saad sitting on table"
    src={manOnTable}
  ></img>
</div>

Лично я предпочитаю import.

2
Zsolt Meszaros 4 Дек 2020 в 23:40