React组件中图片无法显示，如何从JSON加载图片？

在React的JobListing组件中尝试渲染JSON数据提供的logo图片时，图片无法显示。组件已正确传递每个logo的地址，但实际加载无效。已知在组件内直接导入图片并定义本地数据的方式可以正常显示图片，但不清楚如何处理从外部JSON加载图片路径的场景，寻求解决办法。

相关代码 #

JobListing组件代码 #

import React from "react";
import "../Style/JobListing.css";
import datas from "../data.json";

function JobListing() {
  const jobs = datas.map((data) => (
    <div className="JobListing" key={data.id}>
      <div className="topJL">
        <img src={data.logo} alt={data.company} />
      </div>
      <div className="middleJL">
        <div className="mTopSection">
          <div className="titleJL">
            <h3>{data.company}</h3>
          </div>
          <div>
            {" "}
            {data.new ? (
              <div className="newJL">
                <span>NEW</span>
              </div>
            ) : null}
          </div>
          <div>
            {data.featured ? (
              <div className="featuredJL">
                <span>FEATURED</span>
              </div>
            ) : null}
          </div>
        </div>
        <div className="mMidSection">
          <h2>{data.position}</h2>
        </div>
        <div className="mBottonSection">
          <div className="bottonInfo">
            <p>{data.postedAt}</p>
          </div>
          <div className="bottonInfo">
            <p>{data.contract}</p>
          </div>
          <div className="bottonInfo">
            <p>{data.location}</p>
          </div>
        </div>
      </div>
      <div className="bottonJL">
        <div className="bottonTags">
          <div className="roleJL">{data.role}</div>
          <div className="levelJL">{data.level}</div>
          <div className="languagesJL">
            {data.languages.map((language, index) => (
              <div key={index} className="languageJL">
                {language}
              </div>
            ))}
          </div>
          <div className="toolsJL">
            {data.tools.map((tool, index) => (
              <div key={index} className="toolJL">
                {tool}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  ));
  return <React.Fragment>{jobs}</React.Fragment>;
}
export { JobListing };

JSON数据示例 #

{
    "id": 1,
    "company": "Photosnap",
    "logo": "./assets/photosnap.svg",
    "new": true,
    "featured": true,
    "position": "Senior Frontend Developer",
    "role": "Frontend",
    "level": "Senior",
    "postedAt": "1d ago",
    "contract": "Full Time",
    "location": "USA Only",
    "languages": ["HTML", "CSS", "JavaScript"],
    "tools": []
}

可行的本地数据示例 #

import React from "react";
import '../style/MiniNews.css'
import img1 from '../assets/image-retro-pcs.jpg'
import img2 from '../assets/image-top-laptops.jpg'
import img3 from '../assets/image-gaming-growth.jpg' 
const mininews=[
    {   
        img: img1,
        number:'01',
        title:'Reviving Retro PCs',
        p: 'What happens when old PCs are given modern upgrades'
    },
    {   
        img: img2,
        number: '02',
        title: 'Top 10 Laptops of 2022',
        p: ' Our best picks for varous needs and budgets'
    },
    {   
        img: img3,
        number: '03',
        title: 'The Growth of Gaming',
        p: 'How the pandemic has sparked fresh opportunities'
    }
]
function MiniNews(){
    const mininewslist= mininews.map(mininew=>
        <div className="MiniNews" key={mininew.number}>
            <div className="MiniNewsImg"><img src={mininew.img} alt='img News'/></div>
            <div className="MiniNewsInfo">
                <span>{mininew.number}</span>
                <h5>{mininew.title}</h5>
                <p>{mininew.p}</p>

            </div>

        </div>
        )
    return(
        <React.Fragment>{mininewslist}</React.Fragment>
    )
}

export {MiniNews}

问题原因 #

React项目打包时，Webpack会处理静态资源，将图片等文件重命名并输出到指定目录，JSON中写的相对路径不会被Webpack解析，导致实际路径错误，图片无法加载。而直接导入图片的方式，Webpack会自动处理正确的资源路径。

解决办法1：使用require动态加载图片 #

修改JobListing组件中img标签的src属性，用require解析JSON中的路径：

<img src={require(`${data.logo}`)} alt={data.company} />

注意：需确保JSON中的路径是相对组件文件的正确路径，比如组件在src/components/，图片在src/assets/，JSON路径应为../assets/photosnap.svg，可根据实际目录结构调整。

解决办法2：将图片放在public目录下 #

把图片文件移动到项目根目录的public/assets/文件夹中，修改JSON中的路径为绝对路径：

"logo": "/assets/photosnap.svg"

此时img标签可直接使用该路径：

<img src={data.logo} alt={data.company} />

这种方式下，Webpack不会处理public目录下的资源，直接原样复制到打包后的目录，路径不会被修改。

解决办法3：预先导入所有图片并映射 #

如果图片数量不多，可预先导入所有需要的图片，创建映射对象后匹配使用：

// 在JobListing组件顶部导入图片
import photosnapLogo from "../assets/photosnap.svg";
// 其他logo依次导入...

// 创建路径映射
const logoMap = {
  "./assets/photosnap.svg": photosnapLogo,
  // 其他logo路径映射...
};

// 使用时匹配映射
<img src={logoMap[data.logo]} alt={data.company} />

这种方式适合图片数量较少的场景，能保留Webpack对资源的处理优势。

内容的提问来源于stack exchange，提问作者Gabriel Arias