0

React app working but after refreshing the page, the images became not visible...

Demo: https://demo-old.herokuapp.com

The issue is discussed(see link below): React won't load local images and that was recommended to use:

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

Instead of:

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

But it was not compiling and producing the error as below:

Error:

./src/App.js
Module not found: Can't resolve './funnyanimal.gif' in '/app/src'
T M
  • 95
  • 2
  • 11

3 Answers3

4

The cause of problem:

The images were not visible after refreshing the page because on the main page the link was to ./funnyanimal.gif but after refreshing the page that is being on a route, then you link to (for ex. to the first image) is ./one/funnyanimal.gif which is not there - that why all images became not visible.

The solution:

I removed the dot from all the img. tags and make them: <img src={"/funnyanimal.gif"} /> instead <img src={"./funnyanimal.gif"} /> This way the link was made to the absolute path and not to the relative one to the route; therefore, after refreshing a page the images would not disappeared.

T M
  • 95
  • 2
  • 11
0

To resolve the problem you have to add file-loader to your webpack configuration.

Installation:

First, run this command to install the package:

npm i -D file-loader

Then, add this config to your webpack.config.js file:

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

Usage:

import image from './picture.png';

...

<img src={image} />
Soroush Chehresa
  • 5,490
  • 1
  • 14
  • 29
  • I don't think that i have webpack.config.js. or server.js? what need to be instead of ... in your code? – T M Jan 14 '19 at 07:17
  • @TM Are you using create-react-app? – Soroush Chehresa Jan 14 '19 at 07:22
  • what do you mean? I've create react app. there are:git, package-son, public, node-modules, src directories.. – T M Jan 14 '19 at 07:39
  • @TM Run `npm run eject` then you can find webpack config files. – Soroush Chehresa Jan 14 '19 at 07:42
  • So, first: npm i -D file-loader, second: npm run eject and then:add this config Is It right? – T M Jan 14 '19 at 07:51
  • What about those plural dots ... in your answer? left them as is/substitute them? – T M Jan 14 '19 at 08:02
  • @TM No, they aren't substituting. I mean is place the config after your configs (don't replace all of them) – Soroush Chehresa Jan 14 '19 at 08:19
  • Not: it the same. I've done 1,2 step but new mirror version want not go through: errors whith this command: npm install -g npm and I don't have webpack.config.js. Where it supposed to be? Should I repeat those 2 steps/do something different? – T M Jan 14 '19 at 17:36
  • I've repeated step1 but not proceed in step 2 with ejection since I've done this earlier... on screen as below: react-scripts eject NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html ? Are you sure you want to eject? This action is permanent. No Close one! Eject aborted. – T M Jan 14 '19 at 18:35
  • It doesn't work even so i've made changes in web pack.conf under/demo-old/node_modules/react-scripts/config: no images after refreshing. – T M Jan 15 '19 at 00:30
-1

Add a unique key to each item in the list. Check the web console inspector, and fix those errors.

More info here 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)
Nate D
  • 29
  • 5