在JSON对象使用图像路径来动态地呈现在分量图像

Question

我遇到了，这似乎是“相似”，以应对在反应的JSON对象等问题的问题，但我似乎无法如何将这些答案翻译。我创建一个小游戏内作出反应（没有反应过来母语）。我可以打电话给我的JSON对象和拉文本，但是，当涉及到拉的图像路径，也不会呈现。要获得这个游戏的基本概念（这是在HTML / JS）采取look at this link for the overall functionality。

这是问题，我有一个基于状态的父Component（GameLogic.js）对象的动态渲染集。我再穿过状态下至玄孙孙子元素，其中将呈现两张照片。这些照片路径存储在本地JSON文件（我可以阅读在这个级别从在的console.log的characters.json文件中的字符串）。虽然它可以读取路径（通过执行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例如：我需要在阵列的文件路径[0] .scene [0] .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.is：

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;

非常感谢你的帮助！我不知道这是否是更容易，but the repo is here

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;