我正试图使用.map将jpeg从资产文件夹传递到react组件，但我只得到Url

Question

因此，我试图在react项目中迭代主页面的数组。迭代正在工作，但它只是返回字符串，而不是渲染图像。我确信这是我所缺少的基本东西，但不确定下一步该做什么。这是我正在处理的文件，其他一切都是标准的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

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

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

与{logo}相同