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

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

0 голосов
/ 14 января 2019

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

Демо: 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'

Ответы [ 3 ]

0 голосов
/ 14 января 2019

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

Установка:

Сначала запустите эту команду для установки пакета: 

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} />
0 голосов
/ 15 января 2019

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

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

Решение:

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

0 голосов
/ 14 января 2019

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

Подробнее здесь https://reactjs.org/docs/lists-and-keys.html#keys

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)
...