CODEWITHSUNDEEP
javascriptnode.jsreactjsnpmgithub-pages
ismailalabou
ismailalabou

Reputation: 35

React app is published but images from the directory (/assets/images/) are missing

My React.js app is published but my images assets in the images directory (/assets/images/) are not deployed.

Published site's structure:

enter image description here

After building the application with npm run build:

enter image description here

asset-manifest.json:

enter image description here

React app structure:

enter image description here

Upvotes: 2

Views: 4263

Answers (1)

Zsolt Meszaros
Zsolt Meszaros

Reputation: 23161

I've just found your site and checked the source. If you check your rendered page in dev tools, your images are rendered as <img src="[object Module]">.

It seems you're using create-react-app and you used require to import your images. In the latest version of CRA, require returns an ES module instead of a string because in file-loader the esModule option is enabled by default.

So make sure, you import your images in one of these ways:

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

Edit:

As you've sent the URL of your repo, I can see that you import images like this:

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

As I mentioned above, you either need to get the default property of the required module:

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

...or use import:

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

// ...

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

I personally prefer import.

Upvotes: 7

Related Questions