Использование пути изображения в объекте JSON для динамического рендеринга изображения в компоненте - PullRequest
Новая
       33

Использование пути изображения в объекте JSON для динамического рендеринга изображения в компоненте

0 голосов
/ 06 февраля 2019

Я сталкиваюсь с проблемой, которая кажется "похожей" на другие проблемы, связанные с объектом JSON в React, хотя я не могу понять, как перевести эти ответы.Я создаю небольшую игру внутри React (не React Native).Я могу вызывать мой объект 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: мне нужен путь к файлу в массиве [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
        },

Вот Parent, 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;

Большое спасибоза помощь!Я не уверен, что это проще, , но репо здесь

1 Ответ

0 голосов
/ 06 февраля 2019

Используйте, чтобы загрузить изображение.Прохождение пути к 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;
...