javascript - react 显示来自传入字符串的图像

Question

我有一个将信息传递给构造函数的 json 文件。在传入的 json 中是 3 个字符串，它们是 3 个不同图像文件的路径。

然后我尝试获取这些字符串并将它们用作 Carousel 中 img 标签的 src。但是，我在下面执行此操作的方式只会显示替代文本。

如何在 React 环境中使用传递给构造函数的字符串作为 img src？

如果我在警报中显示 img1、img2 或 img3，它实际上会显示正确的路径。

已编辑

JSON 包含您在下面看到的内容

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

在 App.js 中它被传递给下面的变量

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

然后根据 id 将它们全部设置为等于来自 JSON 文件的相应 img 标签。

用正在打印的页面

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

我几乎肯定值本身已在构造函数中成功设置，因为我可以在警报中或仅在页面上的 p 标记中正确打印它们。 img src 出于某种原因不会接受它。

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

我想通了。

在 JSON 文件中，我将图像路径作为字符串传递。相反，我需要做的是在 JSON 文件中导入图像，然后将导入传递到字段中，如下所示。

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


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

然后在试图显示 src 需要的读入值的 Item 页面上

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

X 是我要显示的数字。

下面的两个链接更深入地介绍了它的工作原理。感谢大家的帮助。

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