Image from JSON file to React JS file not displaying

Question

I have a JSON file that contains an image source. I am trying to display the image, but it doesn't seem to display. I do not get any errors in the console or in the browser.

JSON File:

[
  {
    "PageLink": "/casestudy/text-healthcare",
    "title": "text healthcare website",
    "id": "text-healthcare",
    "imgSrc": "../assets/work/text-hp.png",
    "alt": "text healthcare",
    "contentClass": "some text..."
  },
  {
    "PageLink": "/casestudy/text2-healthcare",
    "title": "text2 healthcare website",
    "id": "text2-healthcare",
    "imgSrc": "../assets/work/text2-hp.png",
    "alt": "text2 healthcare",
    "contentClass": "some text too..."
  }
]

Here is where I am calling the JSON data in my JS file where CaseStudyData is how I am importing the JSON data into the JS file:

<FeatureBlock pageLink={CaseStudyData[0].PageLink}
              title={CaseStudyData[0].title}
              id={CaseStudyData[0].id} 
              imgSrc={CaseStudyData[0].imgSrc}
              alt={CaseStudyData[0].alt}
              contentClass={CaseStudyData[0].contentClass} />
<FeatureBlock pageLink={CaseStudyData[1].PageLink}
              title={CaseStudyData[1].title} 
              id={CaseStudyData[1].id} 
              imgSrc={CaseStudyData[1].imgSrc} 
              alt={CaseStudyData[1].alt} 
              contentClass={CaseStudyData[1].contentClass} />

Everything else is loading just fine except the image. It is able to retrieve the data and display it. The path to the image is correct as I have verified already.

Here is the path it displays in console which is the right path but the image is no displaying. It says "http://localhost:3000/assets/work/text-hp.png"

When you call the url path to the image directly, are you able to view it? Have you checked the value of the property in FeatureBlock in your web browser's Development Tools? — needoriginalname
– needoriginalname, Commented Mar 19, 2019 at 20:50
Check the network tab in your developer tools and filter by 'Media'. Are the images failing to load? if so where are they trying to load from? — Mark
– Mark, Commented Mar 19, 2019 at 20:51
@needoriginalname I am not able to view it. So the static paths are changing to dynamic paths when I see the image through the standard mark up. :( — Aries Azad
– Aries Azad, Commented Mar 19, 2019 at 20:53
@Mark No luck. the imgSrc being passed in from the JSON file is passing as a string. :( The image paths get generated dynamically when I load the website and I don't know how to do that from JSON to my JS file. — Aries Azad
– Aries Azad, Commented Mar 21, 2019 at 16:12

Mark · Accepted Answer · 2019-03-19 21:47:11Z

1

I am assuming you set up your webpack config yourself? If so you're going to need to install url-loader

npm install -D url-loader

and then update your webpack config with this

{
  test: /\.(gif|png|jpg|svg)(\?.*$|$)/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,
        name: '[name].[ext]',
        publicPath: 'assets/' // or whatever the path you're using for assets is
      },
    },
  ],
},

edited Mar 19, 2019 at 21:47

answered Mar 19, 2019 at 21:10

Mark

1,6982 gold badges15 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

Image from JSON file to React JS file not displaying

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related