如果我从 JSON 文件获得图像路径，我如何在 React 组件中定义图像

Question

I try to make a slider, information about each slide and image path I get from JSON. So, it doesn't work. I get page and I can see that element img have src="../../assets/img/1.png", but image don't show. So how I can add pictures or other files without "require" or "import"? Sorry for my English.

this is api.json file

    "gazel": {
    "gazel1": {
      "car_title": "Газель 3 метра",
      "car_chars": {
        "width": "2",
        "height": "2",
        "vol": "16",
        "power": "1,5"
      },
      "img_src": "../../../assets/img/1.png"
    },
    "gazel2": {
      "car_title": "Газель 3 метра (тентовая)",
      "car_chars": {
        "width": "2",
        "height": "2",
        "vol": "16",
        "power": "2"
      },
      "img_src": "../../../assets/img/1.png"
    }
  }

and this is component

 import React, {Component} from 'react';
    import api from "../../../api/_api.json"
     
    
         
        class SliderItems extends Component {
         
            render() {
                let arr = []
                for(let car in cars){
                    arr.push(
                        <div className="slider__item">
                            <div className="slider__descr">
                                <h4 className="car_name">{cars[car].car_title} </h4>
                                <ul className="car_descr">
                                    <li className="descr_item">Ширина {cars[car].car_chars.width} м</li>
                                    <li className="descr_item">Высота {cars[car].car_chars.height} м</li>
                                    <li className="descr_item">Объем {cars[car].car_chars.vol} м³</li>
                                    <li className="descr_item">Грузоподъемность {cars[car].car_chars.power} т</li>
                                </ul>
                                <button className="btn">Заказать</button>
                            </div>
                            <div className="slider__img">
                                <img src={cars[car].img_src}  alt="car"/>
                            </div>
                        </div>
                    )
                }
         
                return (
                    arr
                )
            }
        }
        let cars = api.gazel;
         
        class SliderLine extends Component {
            render() {
                return (
                    <div className={"slider__line"}>
                        <SliderItems cars={cars}/>
                    </div>
                );
            }
        }
         
        export default SliderLine;

Answer 1

You are not able to dynamically load images from static this way (if I understood it properly.) My workaround: load image from server API this way: On server read file and send it to client:

 fs.readFile(slidePath, (err, buf) => {
      if (err) {
        console.log('ERROR READING FILE: ', err);
        rej(`ERROR READING FILE ON SEND SLIDE ${err}`)
      } else if (ws) {
        ws.send(              // I use websocket, you send it with some REST API
          JSON.stringify({
            route,
            action,
            img: buf.toString('base64'),  // image data, most important!
            data,
          })
        );

and process on client this way:

<div className="slidesTable" key={i}>
          <img width="150px" alt={s} src={`data:image/jpg;base64,${data_from_api}`} />
        </div>

All is part of my code, so you will not need everything