在静态反应应用程序中传递图像的最佳方式答案

【问题标题】：Best way to pass images in static react app在静态反应应用程序中传递图像的最佳方式
【发布时间】：2021-06-18 14:28:30
【问题描述】：

我正在使用 react 创建一个必须是静态的 web 应用程序，因此没有 API 调用，我需要在客户端存储一些数据（我目前只使用单个 JSON 文件，因为它真的不大）但我正在努力传递图像，我将引用作为字符串存储在 JSON 文件中并将它们传递给道具，但我遇到了各种各样的错误。有没有更好或更实用的方法来做到这一点？

代码（我添加了一个变量来模仿JSON结构）：

const HomePage = () => {
   let projectInfo: ProjectInfo = {
      title: "Project",
      description:
         "A progressive web app.",
      imgURL: "./TODO", //<- HERE
      mainColour: "#323232",
      secondaryColour: "#464646",
   };

   return (
      <div id="carousel-container">
         <Carousel labels={["1"]}>
            <ProjectPanel info={projectInfo} />
         </Carousel>
      </div>
   );
};

export default HomePage;

interface IProjectPanelProps {
   info: ProjectInfo;
}

const ProjectPanel = (props: IProjectPanelProps) => {
   return (
      <div className="project-panel">
         <h2>{props.info.title}</h2>
         <p>{props.info.description}</p>
         <img src={/* ?? */} alt=""></img>
      </div>
   );
};

【问题讨论】：

能贴出相关代码吗？
为什么不像公用文件夹那样将它们作为静态资产提供？您可以将它们的相对路径存储在您的 JSON 中
这能回答你的问题吗？ How to import image (.svg, .png ) in a React Component
这就是我最终想要做的事情（目前我只是想在同一个文件中引用一个 svg），但它一直在向我抛出错误......

标签： reactjs

【解决方案1】：

您可以使用 base64 图像来存储它们。

有关如何在 React 中使用二进制图像的示例，请参阅此帖子 https://stackoverflow.com/a/42399865/1356340。

【讨论】：

【解决方案2】：

您可以将主页中的图片作为变量导入，并将该变量传递给您的子组件。

import myImage from 'your_image_path';

const HomePage = () => {
   let projectInfo: ProjectInfo = {
      title: "Project",
      description:
         "A progressive web app.",
      imgURL: myImage
      mainColour: "#323232",
      secondaryColour: "#464646",
   };

   return (
      <div id="carousel-container">
         <Carousel labels={["1"]}>
            <ProjectPanel info={projectInfo} />
         </Carousel>
      </div>
   );
};

export default HomePage;

interface IProjectPanelProps {
   info: ProjectInfo;
}

const ProjectPanel = (props: IProjectPanelProps) => {
   return (
      <div className="project-panel">
         <h2>{props.info.title}</h2>
         <p>{props.info.description}</p>
         <img src={info.imgURL} alt=""></img>
      </div>
   );
};

【讨论】：