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

Question

我有一个 json 文件，它将信息传递到构造函数中。传入的 json 中有 3 个字符串，它们是 3 个不同图像文件的路径。然后，我尝试获取这些字符串并将它们用作轮播中 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} />我几乎肯定这些值本身已在构造函数中成功设置，因为我可以在警报中或仅在页面上的 ap 标记中正确打印它们。由于某种原因，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"                    />            </div>        );    }}

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 是我试图显示的数字。

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 作为 props 传递，但应该传递 path，因为路径是相对于文件路径的。