React组件遍历数组仅渲染图片URL而非图片的问题求助

在React项目主页遍历数组时，迭代功能正常，但图片只显示URL字符串，无法渲染出图片。以下是当前使用的代码：

import './App.css';
const App = () => {
  const faucets = [
    { id: 1, title: 'New Leaf Carbon Project', subtext: "Tasmanian Land Conservatory. Tasmania, Australia", imageUrl: './assets/Carbon Faucet/Projects/TLC-Five-Rivers-Reserve-Credit-Matthew-Newton_02-862x689.jpeg', logo: './assets/Carbon Faucet/Projects/CERLogo.png' },
    { id: 2, title: 'Afognak Island Forest Preservation', subtext: "South Pole. Alaska, United States", imageUrl: './assets/Carbon Faucet/Projects/Afognak-Island-Forest-Preservation-Credit-Matthew-Newton_02-862x689.jpeg', logo: './assets/Carbon Faucet/Projects/South Pole Logo.png' },
    { id: 3, title: 'Crow Lake Wind Farm', subtext: "South Pole. South Dakota, United States", imageUrl: './assets/Carbon Faucet/Projects/Crow-Lake-Wind-Farm-Credit-Matthew-Newton_02-862x689.jpeg', logo: './assets/Carbon Faucet/Projects/South Pole Logo.png' },
    { id: 4, title: 'Bac Lieu Wind Farm', subtext: "South Pole. Vietnam", imageUrl: './assets/Carbon Faucet/Projects/Bac-Lieu-Wind-Farm-Credit-Matthew-Newton_02-862x689.jpeg', logo: './assets/Carbon Faucet/Projects/South Pole Logo.png' },
  ]
  return (
    <div>
      {faucets.map(({title, subtext, imageUrl, logo}) => (
      <div className="Project-Faucets">
        <div className="Project-Banner">
          {imageUrl}
        <div className="Project-Logo">
          {logo}
      </div>
      <div className="Project-Title">{title}</div>
      <div className="Project-Subtext">{subtext}</div>
    </div>
    <div className="Project-Content">
    </div>
  </div>
    ))}
  </div>
  );
};
export default App;

问题原因 #

直接在JSX中输出imageUrl和logo的字符串值，浏览器会将其视为普通文本渲染，而非图片。必须使用<img>标签来加载图片资源。

修正后的代码 #

将直接输出URL的部分替换为<img>标签，通过src属性传入图片路径，同时添加alt属性提供无障碍替代文本；另外补充key属性避免React列表渲染警告：

import './App.css';
const App = () => {
  const faucets = [
    { id: 1, title: 'New Leaf Carbon Project', subtext: "Tasmanian Land Conservatory. Tasmania, Australia", imageUrl: './assets/Carbon Faucet/Projects/TLC-Five-Rivers-Reserve-Credit-Matthew-Newton_02-862x689.jpeg', logo: './assets/Carbon Faucet/Projects/CERLogo.png' },
    { id: 2, title: 'Afognak Island Forest Preservation', subtext: "South Pole. Alaska, United States", imageUrl: './assets/Carbon Faucet/Projects/Afognak-Island-Forest-Preservation-Credit-Matthew-Newton_02-862x689.jpeg', logo: './assets/Carbon Faucet/Projects/South Pole Logo.png' },
    { id: 3, title: 'Crow Lake Wind Farm', subtext: "South Pole. South Dakota, United States", imageUrl: './assets/Carbon Faucet/Projects/Crow-Lake-Wind-Farm-Credit-Matthew-Newton_02-862x689.jpeg', logo: './assets/Carbon Faucet/Projects/South Pole Logo.png' },
    { id: 4, title: 'Bac Lieu Wind Farm', subtext: "South Pole. Vietnam", imageUrl: './assets/Carbon Faucet/Projects/Bac-Lieu-Wind-Farm-Credit-Matthew-Newton_02-862x689.jpeg', logo: './assets/Carbon Faucet/Projects/South Pole Logo.png' },
  ]
  return (
    <div>
      {faucets.map(({id, title, subtext, imageUrl, logo}) => (
        <div className="Project-Faucets" key={id}>
          <div className="Project-Banner">
            <img src={imageUrl} alt="项目横幅" />
            <div className="Project-Logo">
              <img src={logo} alt="项目Logo" />
            </div>
            <div className="Project-Title">{title}</div>
            <div className="Project-Subtext">{subtext}</div>
          </div>
          <div className="Project-Content">
          </div>
        </div>
      ))}
    </div>
  );
};
export default App;

内容的提问来源于stack exchange，提问作者Jonathan Lang