我试图使用.map将jpeg从一个资产文件夹传递到一个react组件中，并且我只获取Urls。

Question

因此，我试图在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(({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;

Answer 1

您需要将{imageUrl}替换为<img src={imageURL} />

第一个只能粘贴文本，第二个是加载图像的正确语法。

同样适用于{logo}