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 标记中的源。这应该有效。&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="d-block w-100"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src={require(this.img1)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alt="First slide"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />老实说，这完全是一个糟糕的方法。您应该将图像导入到组件中（即import img from './*location of image relative to component*/image.jpg'），然后创建一个映射，其中图像路径是键，图像是值（即const images = {'./*path passed to component*/image1.jpg' : img}）。然后使用源标记中传递的值引用地图（即&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="d-block w-100"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src={images[this.img]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alt="First slide"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />)

Answer 4

import img1 from "./images/forest.PNG"...<Item img1={img1} ... />因此，您应该将 obj 作为 props 传递，但应该传递 path，因为路径是相对于文件路径的。