如何根据发送的道具渲染图像？

Question

I am new to react and currently trying to practice a little bit. I have made one component called 'Recensie', and I render a couple of them in my component.

Within this review component I would like to display an image, based on the image prop I sent from the component. However I cannot get it to work. Currently this is my code:

import React from 'react'
function Recensie(props){
    return(
        <div className="recensie">
            {console.log(props.image)}
            <img src={`../imgs/${props.name}.png`}></img>
            <hr/>
            <h2>Lorem Ipsum</h2>
            <h2>Lorem Ipsum</h2>
        </div>
    )
}

export default Recensie

Where the main components code is like this:

import React from 'react'
import Recensie from './Recensie'

class Main extends React.Component{
    constructor(){
        super()
        this.state={

        }
    }

    render(){
        return(
            <div className="recensies">
                <Recensie name="one"/>
                <Recensie />
                <Recensie />
            </div>
        )
    }
}
export default Main

However, the image does not actually show up: https://i.imgur.com/dbvYTqE.png

I have seen that I can import the exact image like this:

import React from 'react'
import imgs from '../imgs/one.png'

function Recensie(props){
    return(
        <div className="recensie">
            {console.log(props.image)}
            <img src={imgs}></img>
            <hr/>
            <h2>Lorem Ipsum</h2>
            <h2>Lorem Ipsum</h2>
        </div>
    )
}

export default Recensie

However, this would mean I have to hardcode the image.

Is there any way that I could do what I originally wanted to do, or is there a workaround I have to do?

Answer 1

This is the simplest example I could come up with:

class Recensie extends React.Component {
    state = {
        image: null,
    };

    componentDidMount() {
        import("./images/" + this.props.name).then((image) => {
            this.setState({ image: image.default });
        });
    }

    render() {
        return this.state.image ? (
            <img alt="image" src={this.state.image} />
        ) : null;
    }
}

Use it like so:

<Recensie name="test.png" />

It uses a dynamic import, which is asynchronous (async calls for data should be made in componentDidMount , see React docs for more info).

Don't forget to adjust the path to your images folder correctly, based on where the Recensie component is located.

Answer 2

I do it this way. Create file imageLoader.js inside some utils folder

// imageLoader.js
// inside images object i name routes for my images from assets folder
// and export loadImage function

const images = {
  img1: require('../../assets/images/img1.jpg'),
  img2: require('../../assets/images/img2.png'),
  flagNotFound: require('../../assets/images/flag_not_found.png')
};

export function loadImage(imageName) {
  if (images.hasOwnProperty(imageName)) {
    return images[imageName];
  }
  return images['flagNotFound'];
}

Use it like

import {loadImage} from '../location-to-imageLoader'

<img alt="not found" src={loadImage('img1')}/>

In your case

 <img alt="not found" src={loadImage(props.name)}/>