React Component with JSON Image path

Question

I have a react component that is pulling in some data from a local json file. That data has some links to images. However the images aren't loading even though the paths are correct. I was using require before but in a different code setup. Now that I've transitioned it to this the images won't load. i'm using webpack 4 so i'm guessing i need to require the images again? How do i do that in the below statement ?

the part that is failing is the 'image={release.imageURL}' which is being passed to the 'src' of the component

import React from "react";
import ReactDOM from "react-dom";
import Release from "./release.js"
import data from "../data/releases.json"

const allReleases = data.map(release => {
  return (
    <div className="column-2">
    <Release
    key={release.id}
    url={release.releaseURL}
    image={release.imageURL}
    cta={release.cta}
    title={release.title}
    artists={release.artists}
    />
    </div>
  )
})

const Releases = () => {

  return (
    <div>
    <div className="row">
      <h3>All Releases</h3>
        {allReleases}
    </div>
    </div>
  )
}

export default Releases;

Are your images references to your local file system or to a URL? If they're local you'll need to require them, otherwise you should be able to pass the string to the src attribute. — themollusk
– themollusk, Commented May 1, 2018 at 10:49
yep they're local to the file system so they'll need require. just not sure how to do that using the above syntax :( — Timmy Lee
– Timmy Lee, Commented May 1, 2018 at 13:08

themollusk · Accepted Answer · 2018-05-01 13:44:37Z

3

Without knowing the details of what you're trying to achieve, I think you can do the following:

Because you're providing paths in your json, you'll need to require them dynamically.

releases.json

[
  {
    imageURL: "/image01.jpg"
  },
  {
    imageURL: "/image02.jpg"
  },
  {
    imageURL: "/image03.jpg"
  }
]

then assuming you know the relative path to these images you can require them inside your map

const allReleases = data.map(release => {
  return (
    <div className="column-2">
      <Release
        url={require('./path/to/images' + release.imageURL)}
      />
    </div>
  )
})

Alternatively, you could make your releases.json a js file and import your images there and put them in your data as variables.

answered May 1, 2018 at 13:44

themollusk

4404 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Timmy Lee Over a year ago

ja.. i tried this and i get a: "Critical dependency: the request of a dependency is an expression" and a "Uncaught Error: Cannot find module "/releases/release001" :(

Timmy Lee Over a year ago

ok! was doing something wrong with the paths! this works! thank you :D

Rin and Len Over a year ago

More needless complexity from JSX/React. If the attribute = src on an image tag, why can it not interpret the path correctly without resolve? Svelte manages :D

Dharman · Accepted Answer · 2022-02-07 11:26:52Z

0

Bro, I was working on this problem and eventually figure it out:

1- All you have to do is changing the path of the image from your JSON file. That means the path should be related to your react component (allReleases).

2- Next thing, instead of using

*

<Release
    key={release.id}
    url={release.releaseURL}
    image={release.imageURL}  // ==> WRONG
    cta={release.cta}
    title={release.title}
    artists={release.artists}
/>

Just go with:

*

<Release
    key={release.id}
    url={release.releaseURL}
    image={`${release.imageURL}`} // ===> CORRECT
    cta={release.cta}
    title={release.title}
    artists={release.artists}
/>

edited Feb 7, 2022 at 11:26

Dharman♦

34k27 gold badges106 silver badges157 bronze badges

answered Feb 7, 2022 at 11:21

Ali Akbar

418 bronze badges

Collectives™ on Stack Overflow

React Component with JSON Image path

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related