React - cannot display svg images which path is stored in json file

[Speedwaymonia93]

I have a json file where I store paths for my svg icons and other information that I want to display. In a component I map over the data stored in that file. It displays all the data I store there except for the images. When I import the svg directly in the component like this
import img from '../icons/france.svg'; with the same path that is stored in json file and use the variable in the src attribute <img className="lang_icon" src={img}/>)then the svg is shown. Do you happen to know how to solve this?
Here you have json file structure:

 
 [
    {
        "id":0,
        "language": "English",
        "level":5,
        "img":"../icons/france.svg"
    },
    {
        "id":1,
        "language": "Spanish",
        "level":5,
        "img": "../icons/france.svg"
    },
    {
        "id":2,
        "language": "Italian",
        "level":4,
        "img":"../icons/france.svg"
    },
    {
        "id":3,
        "language": "French",
        "level":3,
        "img": "../icons/france.svg"
    },
    {
        "id":4,
        "language": "Portuguese",
        "level":2,
        "img": "../icons/france.svg"
    }

]

And my component structure:

import React from 'react'
import './Styles.css'
import communicationImg from '../images/communication.svg';
import dataLanguages from '../data/languagesData.json';
import { faStar } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

function Languages()
{
 return(
     
        <div id='languages'>
            
            <h2>Languages</h2>
            <img className="images" src={communicationImg} alt="communicationImg"/>
            <div className="lang_content">
                {
                    dataLanguages.map((element)=>{
                        return(
                            <>
                            <div className="lang_container">
                                <div className="lang_img">
                                        <img className="lang_icon" src={element.img}/>
                                </div>
                                <div className="lang_label">{element.language}</div>
                                <div className="rating">
                                    {
                                         [...Array(element.level).keys()].map(()=><FontAwesomeIcon icon={faStar}></FontAwesomeIcon>)
                                    }
                                </div>
                            </div>
                            </>
                        )
                    })
                }
            </div>
        
        </div>
    
 )
}


export default Languages

This is what I see:

This is how it should look like:

-> ignore the order, just mind that the icons are are not shown

[nevraeka]

could be that the paths are not correct. Since they are relative to the root I would check the file structure

[Speedwaymonia93]

Here you have my file structure:

[nevraeka]

where is the root of your server though? in a dist dir? or the root of the project? I assume public is the root…right? If that is the case - try "src/icons/’ instead of “…/icons/”.

[Speedwaymonia93]

/Users/monikastrzalka/Desktop/PortfolioApp

[mysweetr0se]

If you right click on the broken images, what path does it show?

[Speedwaymonia93]

http://localhost:3000/src/icons/france.svg

[mysweetr0se]

and where is your json file stored within your file structure? Is it the manifest.json?

[Speedwaymonia93]

It is stored in the ‘data’ folder

and it is called 'languagesData.json

[DanCouper]

It’s not public, so it ain’t going to work, those directories don’t exist when your source code is compiled. Only things in the “public” folder or things that compile to there can work

The reason it works when you’re use import is that WebPack, the tool that runs Create React App, allows this (it will look at imports as it bundles the app up, and if they match a pattern it has set up to look for non-js files, it basically copies the file to public/ and rewrites the places where it is used in the code as a normal file path)

[Speedwaymonia93]

So what should I do, move the icons folder to ‘public’ folder to make it work?

[DanCouper]

Yes, that would work. Anything in the src folder either has to be JavaScript or has to be imported into JavaScript files to be processed by Webpack. With static imports, you have to actually specify each file, so another option is that you could add an index file to the images folder in src, import all the files there then export a single component that you pass a prop that specifies which icon to render (basically what you’ve got, but it wouldn’t take a path, it would take that prop)

[Speedwaymonia93]

Thank you sooooo much . I moved the icons folder to public folder and changed the path to images that is stored I son file to this "./icons/uk.svg" and it worked!