React display an image from passed in string

Question

I have a json file that passes in information into a constructor. In the passed in json is 3 strings that are paths to 3 different image files.

I am then trying to take those strings and use them as the src for in img tag in a Carousel. However, the way I'm doing it below results in just the alt text being displayed.

How can I go about using the strings passed in to the constructor as an img src within a react enviroment?

If I have img1, img2, or img3 display themselves in an alert it does in fact display the correct path.

edited

The JSON contains what you see below

      'img1':'./images/forest.PNG',
      'img2':'./images/desert.PNG',
      'img3':'./images/city.PNG'

in the App.js it is passed to the variables below

  let grabbedImg1 = '';
  let grabbedImg2 = '';
  let grabbedImg3 = '';

Which then are all set to be equal to the respective img tag from the JSON file based on an id.

With the page being printed with

<Item name={grabbedName} date={grabbedDate} lang={grabbedLang} detail={grabbedDetails} img1={grabbedImg1} img2={grabbedImg2} img3={grabbedImg3} />

I'm nearly positive the values themselves are successfully being set in the constructor as I can print them out properly in an alert or just in a p tag on the page. The img src just won't take it for some reason.

import React from 'react';
import ReactDOM from 'react-dom';
import Jumbotron from 'react-bootstrap/Jumbotron'
import 'bootstrap/dist/css/bootstrap.css';
import Carousel from 'react-bootstrap/Carousel';
import './Item.css';

export class Item extends React.Component {
    constructor({name , date, lang, detail, img1, img2, img3})
    {
     super();
     this.name = name;
     this.date = date;
     this.lang = lang;
     this.detail = detail;
     this.img1 = img1;
     this.img2 = img2;
     this.img3 =img3;
    }

    render(){
        return (
            <div>  
                <Carousel>
                  <Carousel.Item interval={4000}>
                    <img
                      className="d-block w-100"
                      src={this.img1}
                      alt="First slide"
                    />
                  </Carousel.Item>
                  <Carousel.Item interval={4000}>
                    <img
                      className="d-block w-100"
                      src={this.img2}
                      alt="Second slide"
                    />
                  </Carousel.Item>
                  <Carousel.Item interval={4000}>
                    <img
                      className="d-block w-100"
                      src={this.img3}
                      alt="Third slide"
                    />
                  </Carousel.Item>
                </Carousel>

                <Jumbotron>
                  <h1>{this.name}</h1>
                  <h6>Created: {this.date} using {this.lang}</h6>
                  <p>{this.detail}</p>
                </Jumbotron>
            </div>
        );
    }
}

export default Item;

Answer 1

I figured it out.

In the JSON file I was passing in the path to image as a string. Rather what I needed to do was in the JSON file import the image and then pass the import into the field like you see below.

import forest from './images/forest.PNG';
import desert from './images/desert.PNG';
import city from './images/city.PNG';


'img1':{forest},
'img2':{desert},
'img3':{city}

then over in the Item page that was trying to display the read in values the src needed to be

src={Object.values(this.imgX)}

With the X being the number I was trying to display.

The two links below go more in depth with how this works. Thanks for everyone's help.

Images in React: is it possible to use a string from an imported object as the source path for an image?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values