Display image from local JSON / JS Object using React

JavaScript
1

Hi guys,

I am working on a React project where I need to use a JSON file to retrieve data.
Everything is going smoothly except for the fact that I cannot display any logo from my JSON object.

This is the part of my Component where I try to display the logo:

import { companyData } from '../data.js';

const DisplayJobs = () => {
  return (
    <Row>
      <Col>
        {companyData.map((data, key) => {
          return (
              <div id="wrapper-jumbo">
                <Jumbotron key={key} id="jumbo">
                  <Container>
                    <Row>
                      <Col>
                        <img src={data.logo} />
                      </Col>

And this is part of my JSON (I changed it from .JSON to .JS):

export const companyData = [
  {
    "id": 1,
    "company": "Photosnap",
    "logo": "./images/photosnap.svg"
  }
]

Can you tell me what I am doing wrong?

Thanks in advance :slight_smile:

2

Welcome, lainth.

Have you double checked to see that the provided path is relatively correct?

3

Yep, I tried many path, when nothing worked, I put the image in the same folder just to check if it would work this way, but nothing happened…

The only images I can display are the one hosted on a server, but nothing from my local.

4

Well, to break it down for clarification:
./images/photosnap.svg' suggests there is another folder named images in the same location as this component calling it, which contains a file named photosnap.svg.

Have a look in your console to see if there are any permission related errors to do with the location/images.

5

I don’t have any errors in my console, just some unrelated warnings…

This this what my src folder looks like if it can help:
folder

6

I meant your browser console.

Looking at that, though, have you tried this path: ../images/photosnap.svg

7

It was the browser console I was talking about.

And yep, I’ve tried ../images/photosnap.svg …

8

Oh, sorry. misunderstanding.

Do you have the project on GitHub, by any chance?

9

No worries.

Yes, I just pushed the most recent version.
You can find it : here

Also, you’ll need to run npm install react-bootstrap bootstrap because I’m using a lost of react-boostrap Components.

In the Browser console you’ll see an Error displayed as Warning for some reasons saying " Each child in a list should have a unique “key” prop. "
But if you look up the React Developer tool, you’ll see that all my key are unique.

10

Thank you, for linking that. However, I cannot see any components in your repo?

Nevermind. I found it in the other branch.

I cannot see any issue that would prevent the logo from being shown. Back to your warning message:
You have not assigned the parent element the key. You need to do this.

11

Sorry I didn’t merge before…

That’s why I came here to see if somebody could’ve seen something I didn’t, because I tried a lot of things in order to make this work.

Do you think this warning could be preventing my image from displaying ? Because this feels like a long shot.

12

Sorry, this has been such a simple issue…

svg cannot be rendered as a source in an img element in react like this. You are going to have to have a separate loop, going through each logo, importing each image directly. The same way you import a component.

13

Oh God… I thought about this earlier… But I was looking in the wrong place.
I asked myself “could the src prop of : <img src="" /> actually display .svg?”

Instead I should’ve searched from the React side of things…

Thanks a lot for you time! :slight_smile:

1 Like
14

I found another way of displaying images/logos from JSON/JS Objects.

I’m just going to post my solution here since it took some time for me to find this fix, hopefully the next ones with the same issue are going to be able to solve it faster :slight_smile:

Using require in my Object solved the issue.

Like so:

export const companyData = [
  {
    "id": 1,
    "company": "Photosnap",
    "logo": require("./images/photosnap.svg"),

To summarize:

  • Change the .JSON into a .JS

  • Store the Object in a variable export const yourVariable

  • Use require function on the path of your logo/image.

  • Import your variable like you would import another Component (Don’t forget the curly braces import { yourVariable } from ... )

Those steps did the tricks and allowed <img src={data.logo} /> to actually display my logo.

3 Likes
15

Hello lainth and hello everyone, since I know for sure how crazy this type of problem can I wanted to submit this solution to all of you, do not modify the .json file, and insert this function in the map function and return the require of your image like this :

const IMG = (imgName) => {
                     return require (`../ assets / images / $ {imgName}`)
                   }

obviously modify the path according to the location of your file structure, I hope it will be useful to someone in the future

16

This is a perfect yet simple solution to my very problem! Thank you.

17

why is export and require shows red and error is expect a json object,array or literal in my case

18

It’s not working for me. Can you help me out?

19

Hi @Eugene !

The topic has not been active in several months.
If you have a question, I would suggest creating a new topic and asking it there.

Thanks!