React display an image from passed in string

user_14708959 0
Viewed 2546

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;
reactjs json javascript
4 Answers

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

user_147089590

You may need it import these images to use them as a source in the img tag. This should work.

                <img
                  className="d-block w-100"
                  src={require(this.img1)}
                  alt="First slide"
                />

To be honest though this a a bad approach altogether. You should import the images into your component (i.e. import img from './*location of image relative to component*/image.jpg') and then create a map where the image path is the key and the image is the value (i.e. const images = {'./*path passed to component*/image1.jpg' : img}). Then reference the map with the passed value in the source tag (i.e.

                <img
                  className="d-block w-100"
                  src={images[this.img]}
                  alt="First slide"
                />

)

user_53142750

Probably you need to pass img scr relative to public folder in your project. Try to place your images in public/images folder and change json file to:

'img1':'images/forest.PNG',
'img2':'images/desert.PNG',
'img3':'images/city.PNG'
user_117197680 
import img1 from "./images/forest.PNG"
...
<Item img1={img1} ... />

So you should pass obj as props but should pass path because the path is relative against files' path.

user_107415680
Related