React-如何在JSON中存储图像/图像位置,然后可以将其呈现为组件?

问题描述 投票:0回答:1

我正在为播客建立一个简单的网站。最初,我以客人为对象,然后将其作为道具传递到EpisodePage中。图像被导入到文件中并分配给变量。这很好。

从那以后,我将来宾数据提取到一个JSON文件中,该文件对图像不起作用。

我的问题是这个;如何将图像/图像的位置存储在JSON文件中,然后使其在组件和页面上呈现?

[您可以在下面看到我进行了两次尝试-第一个尝试是将文件路径包含在JSON中(不起作用-我在App.js或组件中呈现错误吗?)第二种是将变量名称(sophiePic或jasminePic)作为字符串包含在JSON中-也不起作用。

非常感谢您的协助!谢谢。

缩写代码:

App js:

import jasminePic from "./assets/jasmine.jpg";
import sophiePic from "./assets/SKC.jpg";
import guests from './data/guests.json'

class App extends Component {
  state = {
    guests: guests,
    showModal: false,
    currentGuest: null,
  };

...CODE OMITTED FOR BREVITY...

  render() {
    let guestPage = null;
    if (this.state.currentGuest != null) {
      guestPage = (
        <div>
          <EpisodePage
            epNum={this.state.currentGuest.epNum}
            name={this.state.currentGuest.name}
            pic={require(this.state.currentGuest.pic)}
            text={this.state.currentGuest.text}
            twitter={this.state.currentGuest.twitter}
            instagram={this.state.currentGuest.instagram}
            appleUrl={this.state.currentGuest.appleUrl}
            spotifyUrl={this.state.currentGuest.spotifyUrl}
          />
        </div>
        // TODO do this automatically 
      );
    }

    return (
      <>
        <Home />
        <About />
        <Episodes guestSelector={this.guestSelector.bind(this)} />

        <Rodal
          width={99}
          height={99}
          measure={"%"}
          visible={this.state.showModal}
          onClose={this.hideModalHandler.bind(this)}
          enterAnimation={'slideUp'}
          leaveAnimation={'slideDown'}
        >
          <div>{guestPage}</div>{" "}
        </Rodal>
      </>
    );
  }
}

export default App;

访客json文件:

[
  {
    "epNum": "1",
    "name": "Jasmine",
    "pic": "./assets/jasmine.jpg",
    "twitter": "@handle",
    "instagram": "@handle",
    "appleUrl":
      "https://podcasts.apple.com/gb/podcast/episode-1",
    "spotifyUrl": "https://open.spotify.com/episode/",
    "text":
      "lorem ipsum..."
  },
  {
    "epNum": "2",
    "name": "Sophie",
    "pic": "sophiePic",
    "twitter": null,
    "instagram": "@sophie",
    "appleUrl":
      "https://podcasts.apple.com/gb/podcast/episode-1",
    "spotifyUrl": "https://open.spotify.com/episode/",
    "text":
      "lorem ipsum...” "
  }
]

EpisodePage组件:

import React from "react";
import { FaSpotify, FaPodcast, FaTwitter, FaInstagram } from "react-icons/fa";

const EpisodePage = (props) => {
  const handleLinkClick = (url) => {
    window.open(url, "_blank");
    // this.nextComponent.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <>
      <section className="epSection" id="epSection">
        <div className="epTitle">
          EPISODE {props.epNum} - {props.name}
        </div>
        <div className="epContainer">
          {/* embed episode?  */}
          {/* <div className="epImage"> */}
          <img className="epImage" src={props.pic} alt="guestPic" />
          {/* do we need className & alt on above line? */}
          {/* </div> */}
          <div className="epText">{props.text}</div>
        </div>
        <div className="directories">
          <FaPodcast className="directoryIcon" onClick={() => handleLinkClick(props.appleUrl)} />
          {/* add hover over animation to all icons */}
          <p>Apple Podcasts</p>
          <FaSpotify className="directoryIcon" onClick={() => handleLinkClick(props.spotifyUrl)} />
          <p>Spotify</p>
        </div>
        <div className="socials">
          <FaTwitter className="directoryIcon" />
          <p>{props.twitter}</p>
          <FaInstagram className="directoryIcon" />
          <p>{props.instagram}</p>
          {/* need to show/not show socials if exist/dont */}
        </div>
        {/* add link back UP to episodes */}
      </section>
    </>
  );
  // }
};

export default EpisodePage;
javascript json reactjs parsing
1个回答
0
投票

[找到解决方案:不要使用JSON,请使用此处所述的标准js文件:https://www.freecodecamp.org/forum/t/best-way-to-pass-icon-img-urls-in-react-as-props/307917/2

在您的.json文件中,数组中每个对象文字的属性图标是一个字符串。因此,您要将图标字符串传递给DailyWorkout而不是图标“本身”(从png文件导入)。

代替从.json文件导入信息,您可以从导出数组的.js文件。您可以从此.js导入图片。

工作代码:

import jasminePic from "../assets/jasmine.jpg"
import sophiePic from "../assets/sophie.jpg";

export default [
  {
    /* other properties */,
    pic: jasminePic,
  },
  {
    /* other properties */,
    pic: sophiePic,
  },
]
© www.soinside.com 2019 - 2024. All rights reserved.