Javascript 显示传入字符串中的图像

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

然后，我尝试将这些字符串用作转盘中in-img标记的src。然而，我在下面这样做的结果只是显示alt文本

如何在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;

从“React”导入React；
从“react dom”导入react dom；
从“反应引导/Jumbotron”导入Jumbotron
导入'bootstrap/dist/css/bootstrap.css'；
从“react引导/旋转木马”导入旋转木马；
导入“./Item.css”；
导出类项扩展了React.Component{
构造函数（{name，date，lang，detail，img1，img2，img3}）
{
超级（）；
this.name=名称；
this.date=日期；
this.lang=lang；
this.detail=细节；
this.img1=img1；
this.img2=img2；
这一点。img3=img3；
}
render（）{
返回(
{this.name}
使用{this.lang}创建：{this.date}
{this.detail}

);
}
}
导出默认项；

从“/images/forest.PNG”导入img1
...

---

因此，您应该将obj作为道具传递，但应该传递路径，因为路径与文件的路径相对。

您可能需要它导入这些图像，以便将它们用作img标记中的源。这应该行得通

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

---

)

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

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

我想出来了

在JSON文件中，我将路径作为字符串传递给image。相反，我需要做的是在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需要读取的read-in值的Item页面中

src={Object.values（this.imgX）}

X是我想显示的数字

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

---

需要查看JSON文件才能确定。可能是您的src不正确。您确定这些img值是普通字符串吗？可能是您的相对路径被弄乱了。请尝试传入一个绝对路径，因为这看起来应该有效。img1是App.js文件中基于相对路径的，我很好奇这是否有效。如果路径正确，这种方法应该有效。提供正确的路径取决于OP的其余代码。更改代码以反映这一点最终导致页面抛出错误。错误：找不到模块'./images/forest.PNG'@Tyler90901，这是因为您向组件传递了错误的路径。我还更新了答案，加入了一个替代解决方案。这不管用吗？您应该通过App.js传递img obj。然后它可以在Item.js中工作。如果你试过，请告诉我。这是错误的。您完全可以从构造函数中的props对象中销毁值。

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

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


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