Как сохранить фотографии после обновления страницы на React?

Question

Реактивное приложение работает, но после обновления страницы изображения становятся невидимыми...

Демо: https://demo-old.herokuapp.com/

Обсуждается проблема (см. Ссылку ниже): React не будет загружать локальные изображения, и это было рекомендовано для использования:

<img src={require('./funnyanimal.gif')} /> 

Вместо:

<img src={"./funnyanimal.gif"} />

Но это не компилирование и создание ошибки, как показано ниже:

Ошибка:

./src/App.js
Module not found: Can't resolve './funnyanimal.gif' in '/app/src'

Answer 1

Причина проблемы:

Изображения не были видны после обновления страницы, потому что на главной странице была ссылка на./funnyanimal.gif, но после обновления страницы, находящейся на маршруте, вы ссылаетесь (например, на первое изображение). /one/funnyanimal.gif которого там нет - поэтому все изображения стали невидимыми.

Решение:

Я удалил точку из всех изображений. теги и сделать их: <img src={"/funnyanimal.gif"} /> вместо <img src={"./funnyanimal.gif"} /> Таким образом, была сделана ссылка на абсолютный путь, а не на относительный путь к маршруту; поэтому после обновления страницы изображения не исчезнут.

Answer 2

Чтобы решить эту проблему, вы должны добавить загрузчик файлов в конфигурацию вашего веб-пакета.

Монтаж:

Сначала запустите эту команду, чтобы установить пакет:

npm i -D file-loader

Затем добавьте этот конфиг в ваш webpack.config.js файл:

module.exports = {
  ...
  module: {
    ...
    rules: [
      ...
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
    ],
  },
};

Использование:

import image from './picture.png';

...

<img src={image} /> 

Answer 3

Добавьте уникальный ключ к каждому элементу в списке. Проверьте инспектора веб-консоли и исправьте эти ошибки.

Более подробная информация здесь https://reactjs.org/docs/lists-and-keys.html

index.js:1452 Warning: Each child in an array or iterator should have a unique "key" prop.

    in ul (at Six.js:15)
    in Six (created by Route)
    in Route (at App.js:113)
    in div (at App.js:112)
    in div (at App.js:95)
    in div (at App.js:28)
    in div (at App.js:19)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:18)
    in AppRouter (at src/index.js:7)