在JSON对象中使用图像路径在组件中动态呈现图像

Question

我遇到的问题似乎与其他在React中处理JSON对象的问题“类似”，尽管我似乎无法解释这些答案。我正在创建一个小游戏内的反应(而不是反应本土)。我能够调用我的JSON对象并拉出文本，但是，当涉及到拉出图像路径时，它将不会呈现。为了了解这个游戏的基本概念(在HTML/ JS中)，请使用一个查看此链接以获取整体功能。。

问题是，我有一个基于父组件(GameLogic.js)中状态的对象动态呈现集。然后，我把状态传递给曾曾孙元素，在那里，它将呈现两张照片。这些照片路径存储在本地JSON文件中(我可以在这个级别从characters.json文件中读取console.log中的字符串)。虽然它可以读取路径(通过console.log)，但它没有呈现这些图像。我是如何能够渲染这些图像，只要我没有串在一起，一条漫长的动态的道路。

这里是文件结构：

-components folder
|-GameLogic.js (parent element that handles the render)
|-Bandersnatch.js (child element)
|-NewComponents folder
  |-ImageContainer.js (grandChild element)
  |-ImageSquare.js (great grandChild element)
-images folder
  |-snatch_images folder (yes... I know how bad this sounds...)
    |-escape_snatch.png
    |-The rest of the images (there are about 20)
 -characters.json
 -App.js

JSON示例:我需要Array.scene.choiceOneImg的文件路径

[

{
    "name": "Giraffe",
    "alive": true,
    "active": true,
    "staticImg": "images/characters/static/static_giraffe.png",
    "animatedImg": "images/characters/animated/animated_giraffe.png",
    "cagedImg": "images/characters/caged/caged_giraffe.png",
    "scene": [
        {
            "used": false,
            "backgroundImg": "images/BG_images/zooBG.png",
            "question": "........." ,
            "answerTrue": ".......",
            "answerFalse": ".......",
            "choiceOne": "RUN FOR IT!",
            "choiceTwo": "Stay loyal",
            "choiceOneImg": "../images/snatch_images/escape_snatch.png",
            "choiceTwoImg": "images/snatch_images/stay_snatch.png",
            "incorrectResult": 0,
            "correctAnswer": "choiceOne",
            "correct": true
        },

这里的是父GameLogic.js，它从不断变化的状态传递currentCharacter、sceneLocation：

import React, { Component } from "react";
import Snatch from "./Bandersnatch";
import characters from "../characters.json";

class GameLogic extends Component {

state ={
    unlockedCharacters : 0,
    currentCharacter : 0,
    sceneLocation : 0,
    points : 0,
    showCaracterSelect: true,
    showMessage: false,
    showSnatch: false,
    showCanvas: false,

}

componentDidMount() {

}


render() {
    return (
        <Snatch 
            sceneLocation = {this.state.sceneLocation}
            currentCharacter = {this.state.currentCharacter}
            choiceOneAlt = "ChoiceOne"
            choiceOneImg = {characters[this.state.currentCharacter].scene[this.state.sceneLocation].choiceOneImg}
            choiceTwoAlt = "ChoiceTwo"
            choiceTwoImg = {characters[this.state.currentCharacter].scene[this.state.sceneLocation].choiceTwoImg}
        />
    )
}
}

 export default GameLogic;

然后将传递给子组件Bandersnatch.js:

import React, { Component } from "react";
import characters from "../characters.json";
import { HeaderH2, ImageContainer, ImageSquare, ImageText, ProgressBar, Timer } from "./NewComponents/AllComponents";

const Snatch = (props) => {
    return (
        <>
            <title>Decision Time</title>
            <div className="w3-container">
                <div className="container">
                    <HeaderH2 text="What Would You Like To Do?" />

                    <div className="row">
                        <ImageContainer
                            sceneLocation = {props.sceneLocation}
                            currentCharacter = {props.currentCharacter}
                            choiceOneAlt = {props.choiceOneAlt}
                            choiceOneImg = {props.choiceOneImg}
                            choiceTwoAlt = {props.choiceTwoAlt}
                            choiceTwoImg = {props.choiceTwoImg}
                        />
                        {/* <ProgressBar /> */}
                        {/* <ImageText 
                            sceneLocation = {props.sceneLocation}
                            currentCharacter = {props.currentCharacter}
                        /> */}
                    </div>

                </div>
            </div>
        </>
    );

 }

 export default Snatch;

，然后传递给ImageContainer:

import React, { Component } from "react";
import ImageSquare from "./ImageSquare";
import characterObject from "../../characters.json";

const ImageContainer = (props) => {
    return (
        <>
            <div className="col-md-6 optionOneclassName">
                <ImageSquare
                    imgsrc={props.choiceOneImg}
                    altText={props.choiceOneAlt}
                />
            </div>
            <div className="col-md-6 optionTwoclassName">
                <ImageSquare
                    imgsrc={props.choiceTwoImg}
                    altText={props.choiceTwoAlt}
                />
            </div>
        </>
    )
 };

 export default ImageContainer;

，然后最终在ImageSquare.js:中接受

import React from "react";

const ImageSquare = (props) => { // passing in the img src
 return (

    <img src={props.imgsrc} alt={props.altText} height="600" width="600" />
   )
};

export default ImageSquare;

非常感谢你的帮助！我不确定这是否更容易，但回购公司来了

Answer 1

使用“要求”加载图像。直接传递到img的路径将无法工作。您需要导入或需要加载映像。

您需要在路径之前添加../

变化

   import React from "react";
   const ImageSquare = (props) => { // passing in the img src
     return (
         <img src={props.imgsrc} alt={props.altText} height="600" width="600" />
     )
  };

 export default ImageSquare;

至

    import React from "react";
    const ImageSquare = (props) => { // passing in the img src
     const path = "../"+props.imgsrc;
      return (
        <img src={require(path)} alt={props.altText} height="600" width="600" />
       )
 };

  export default ImageSquare;