CODEWITHSUNDEEP
reactjswebpack
Hamodey_
Hamodey_

Reputation: 86

Image src in Inspect Element showing up as [object Object]

I am trying to get the image to show up in my Section from my .json file. So, as always I added a prop to the component and parsed the values of the .json file which is config.dog.src . I console print this and the value comes out perfectly with dog.png in console. However, in the code in inspect element it shows [object Object]. Any idea?

I have tried changed the .json file around, and hard coding but that defeats the purpose of the .json file so dont really want to do that. 

dog:{
    src: "dog.png"
} 

<DogComponent src={config.dog.src} />

Console inspect element shows the following:

<img src=[object Object] />

Expected output should be:

<img src="dog.png" />

Upvotes: 0

Views: 1961

Answers (1)

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

Sounds like you may be missing the file-loader for webpack. Add this to your webpack config module section, and make sure you are importing the image via resolvable path and it should work:

{
  test: /\.(jpe?g|png)$/i,
  include: path.resolve(__dirname, './'),
  loaders: ['file-loader']
}

Upvotes: 1

Related Questions