从 ReactJS 中的 JSON 文件动态导入图像答案

【问题标题】：import image dynamically from JSON file in ReactJS从 ReactJS 中的 JSON 文件动态导入图像
【发布时间】：2021-06-15 21:38:54
【问题描述】：

如何动态导入图像，以便每个项目页面根据项目 ID 加载不同的图像？有没有办法可以将图像数据 url（在 data.json 中）传递给图像数组（在 ProjectItem.js 中） - 目前我正在使用静态路径，所以在所有单个项目页面上加载相同的图像，请参阅下面的图像以获取参考。

ProjectItem.js

import React from 'react';
// import images from '../../data.json';
import './ProjectItem.scss';
import { useParams } from 'react-router-dom';
import NotFoundPage from '../../Pages/NotFoundPage';
// import SingleProj from './SingleProj/SingleProj.js';

const ProjectItem = () => {
  const params = useParams();
  console.log(params.projectId);

  const images = [
    {"picture": "Images/Projects/Desktop/smx_sitemap.png",},
    {"picture2": "Images/Projects/Desktop/initial/home1.png",},
    {"picture3": "Images/Projects/Desktop/initial/home1.png",},
    {"picture4": "Images/Projects/Desktop/initial/home1.png",},
  ]

  const mainImageComponent = images.map((image)=>{
    return(
      <div key={image.id} >
        <img className="projectItemImg" src={'/' + image.picture} onError={e => e.target.style.display = 'none'}/>
      </div>
    )
  });

  const imagesComponent = images.map((image)=>{
    return(
      <div key={image.id} >
        <ul className="project-item-imgs">
          <li>
            <img className="projectItemImg" src={'/' + image.picture2} onError={e => e.target.style.display = 'none'}/>
          </li>
          <li>
            <img className="projectItemImg" src={'/' + image.picture3} onError={e => e.target.style.display = 'none'}/>
          </li>
        </ul>
      </div>
    )
  });

  return(
    <div className="container">
      <div className="projectItem">
      <p>{params.projectId}</p>
      {mainImageComponent}
      <p>The initial design - made in Sketch v. 52.5</p>
      { 
      images.length > 2 ? 
      imagesComponent : 
      <NotFoundPage />
      }
      <p>The final design - implemented in Wordpress 5.2</p>
      </div>
  </div>

  )
};

export default ProjectItem

data.json

[
    {
        "id": 0,
        "title": "fitness",
        "category": "project management",
        "picture": "Images/Projects/Desktop/TeamK.png",
        "date": "2020-2021",
        "shortDescription": "",
        "url": "",
        "url2":"",
        "description": "",
        "desktop": [],
        "mobile": [],
        "resources": [
            {
              "name": "URL Parameters",
              "id": "url-parameters",
              "description": "URL parameters are parameters whose values are set dynamically in a page's URL. This allows a route to render the same component while passing that component the dynamic portion of the URL so it can change based off of it.",
              "url": "https://ui.dev/react-router-v4-url-parameters/"
            }
          ]
    },
    {   
        "id": 1,
        "title": "afterparty",
        "category": "ux / ui design",
        "picture": "Images/Projects/Desktop/JJEntertainment.jpg",
        "date": "Wed April 01 2020 11:39:00 GMT-0700 (PDT)",
        "shortDescription": "web design agency lead development and project management",
        "url": "",
        "url2": "",
        "description": "",
        "desktop": [],
        "mobile": []
    },
    {
        "id": 2,
        "title": "sitemax",
        "category": "ux / ui design, frontend development",
        "picture": "Images/Projects/Desktop/Sitemax.png",
        "picture2": "Images/Projects/Desktop/smx_sitemap.png",
        "picture3": "Images/Projects/Desktop/initial/home1.png",
        "picture4":"",
        "picture5":"",
        "picture6":"",
        "picture7":"",
        "picture8":"",
        "date": "2018-2019",
        "shortDescription": "construction software company frontend development and web management",
        "url": "",
        "url2": "",
        "description": "",
        "desktop": [],
        "mobile": []
    },
]

projects/:projectId projects/:projectId

在我为图像添加额外的地图功能后它起作用了，但是这样我就没有正确使用projectImages[0], projectImages[1]。而且这个地图功能真的很长而且多余。有哪些方法可以缩短我的代码？

更新代码

import React from 'react';
import images from '../../data.json';
import './ProjectItem.scss';
import { useParams } from 'react-router-dom';
import NotFoundPage from '../../Pages/NotFoundPage';

const ProjectItem = () => {
  
  const params = useParams();

  const projectImages = images
  .filter((image) => image.title === params.projectId
  )

  const items = images
  .filter((image) => image.title === params.projectId);
  if (images.length === 0){
    return (<div>No such project</div>);
  }
  const projects = images
  .filter((image) => image.title === params.projectId);
  if (projects.length === 0){
   return (<div>No such project</div>);
  } else {
  }    
  return(
    <div className="container-m">
      <div className="container-l">
        <div className="projectItem">
        <p>project - {params.projectId}</p>
          {items
          .map((item)=>{
            return(
              <div key={item.id} >
                <img width="50" height="50" className="singleProjectImg" src={'/' + item.pictures[1]} onError={e => e.target.style.display = 'none'}/>
              </div>
            )
          })}
        <p>The initial design - made in Sketch v. 52.5</p>
        {
        projects.map((el)=>{
          return(
            <div className="project-item-imgs gallery" key={el.id} >
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[2]} onError={e => e.target.style.display = 'none'}/> 
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[3]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[4]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[5]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[6]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[7]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[8]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[9]} onError={e => e.target.style.display = 'none'}/>
              </figure>
            </div>
          );
        })}

        <p>The final design - implemented in Wordpress 5.2</p>
        {projects.map((el)=>{
          return(
            <div className="project-item-imgs gallery" key={el.id} >
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[10]} onError={e => e.target.style.display = 'none'}/> 
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[11]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[12]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[13]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[14]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[15]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[16]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg" src={'/' + el.pictures[17]} onError={e => e.target.style.display = 'none'}/> 
              </figure>
              <figure>
                <img className="projectItemsImg" src={'/' + el.pictures[18]} onError={e => e.target.style.display = 'none'}/>
              </figure>
            </div>
          );
        })}
        {projects.map((el)=>{
          return(
            <div className="project-item-imgs gallery-s" key={el.id} >
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[19]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[20]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[21]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[22]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[23]} onError={e => e.target.style.display = 'none'}/>
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[24]} onError={e => e.target.style.display = 'none'}/> 
              </figure>
              <figure>
                <img className="projectItemsImg-s" src={'/' + el.pictures[25]} onError={e => e.target.style.display = 'none'}/>
              </figure>
            </div>
          );
        })}
        </div>
    </div>
  </div>
  )
};

export default ProjectItem

【问题讨论】：

您使用的是什么构建系统？ import images from '../../data.json'（代码中的注释行）应该在大多数系统中导入 JSON 数据。它会给你一个错误信息吗？你console.log(images) 看看它导入了什么吗？
嗨@edemaine console.log(images) 有效。它显示了 json 文件中的完整数据列表。我现在想要实现以下目标 - 例如在名为 localhost:3000/projects/projectname1 的页面（组件）上仅加载其数组中具有标题 projectname1 的图像数据。这可能吗？

标签： javascript json reactjs

【解决方案1】：

听起来您在问如何将从您的 JSON 文件导入的完整图像集过滤到仅与项目相关的图像子集。 filter 应该在这里解决问题。例如，要从完整的 JSON images 到 title 等于 params.projectId 的项目中选择项目，您可以执行以下操作：

下面是部分代码：

import images from '../../data.json';

const ProjectItem = () => {
  const params = useParams();
  const projectImages = images
  .filter((image) => image.title === params.projectId);

但是，您似乎在 JSON 的一条记录中列出了多个图像，键为 picture、picture2 等。您可以考虑将其转换为图片数组，如以下 JSON：

    {
        "id": 2,
        "title": "sitemax",
        "category": "ux / ui design, frontend development",
        "pictures": [
            "Images/Projects/Desktop/Sitemax.png",
            "Images/Projects/Desktop/smx_sitemap.png",
            "Images/Projects/Desktop/initial/home1.png",
        ],
        "date": "2018-2019",
        "shortDescription": "construction software company frontend development and web management",
        "url": "",
        "url2": "",
        "description": "",
        "desktop": [],
        "mobile": []
    },

然后您可以在匹配记录中引用pictures 数组。例如：

  // Find all JSON records with matching title
  const projects = images
  .filter((image) => image.title === params.projectId);
  // Abort/report error if no match
  if (projects.length === 0)
    return <div>No such project</div>;
  // Otherwise, assume just one match, and get its images.
  const projectImages = projects[0].images;
  // Now can use projectImages[0], projectImages[1],
  // or loop over them with projectImages.map(...)

【讨论】：

感谢您的解释！ console.log(projects)输出匹配params.projectId的项目。在您显示的最后一个示例中，我在返回行之后添加了 else 条件并包含 const projectImages = projects[0].images; 它不返回任何错误并且单词“projectImages”变灰。
当我将const projectImages = projects[0].images; 放在过滤器函数之外时，它返回“标识符'projectImages'已经被声明”。我在正确的轨道上吗？ @edemaine
听起来您对projectImages 有两个定义。确保为每个 const 或 let 声明使用不同的变量名。
我添加了更新的代码，我不确定如何使用const 和let，所以我只使用了const。更新的代码显示了我到目前为止所得到的。你能给我什么建议吗？
您更新后的代码以完全相同的方式定义projectItems、items 和projects。您只需要其中一个定义。但是，它们中的每一个都是大小为 1 的数组，因为只有一个项目与指定的 ID 匹配。如果要遍历图像，则需要查看第一项 (projects[0])，然后使用其中的字段。看我回答中projectImages的定义，和你在更新代码中给出的projectImages不同。