Search code examples
javascriptnode.jsreactjsnpmgithub-pages

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

Solution

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