React 从传入的字符串显示图像

Question

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

然后我尝试获取这些字符串并将它们用作轮播中 img 标记的 src。但是，我在下面这样做的方式只会显示替代文本。

如何在反应环境中使用传递给构造函数的字符串作为 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 需要的读取值

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

Answer 2

可能您需要传递相对于项目中公共文件夹的 img scr。 尝试将您的图像放在 public/images 文件夹中并将 json 文件更改为：

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

Answer 3

您可能需要它导入这些图像以将它们用作 img 标签中的来源。这应该可以。

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

说实话，尽管这完全是一个糟糕的方法。您应该将图像导入组件（即import img from './*location of image relative to component*/image.jpg'），然后创建一个映射，其中图像路径是键，图像是值（即const images = {'./*path passed to component*/image1.jpg' : img}）。然后使用源标签中传递的值引用地图（即

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

)

Answer 4

import img1 from "./images/forest.PNG"
...
<Item img1={img1} ... />

所以你应该传递 obj 作为道具，但应该传递路径，因为路径是相对于文件路径的。