从Pixabay取图链接映射后无法在img标签显示求助（用Tailwind）

核心问题分析 #

• map回调未返回组件：App.js里的map函数内部没有返回Image组件，导致组件根本没被渲染到页面上。
• props传递与接收不匹配：App.js传的是image={image.webformatURL}（字符串链接），但Image组件里却试图访问image.webformatURL，字符串没有这个属性，最终img的src变成undefined，自然显示不出图片。

修正后的代码 #

App.js映射代码

<div className='flex relative h-1/2 w-1/2'>
  {images.map((image, i) => {
    console.log(image.webformatURL);
    // 必须return组件，或者用圆括号包裹JSX省略return
    return <Image key={i} imageUrl={image.webformatURL} alt='aa' className='w-20 h-56' />;
  })}
</div>

Image组件代码

function Image({ imageUrl, alt, className }) {
  return (
    <div className={className}>
      <img src={imageUrl} alt={alt} />
      {console.log(imageUrl)}
    </div>
  )
}

export { Image }

额外说明 #

• 把属性名改成imageUrl是为了避免混淆，明确传递的是图片链接字符串；同时把className和alt也传递给子组件，让Tailwind样式和图片替代文本正常生效。
• 可以把控制台打印的链接复制到浏览器地址栏，验证链接本身是否能正常打开图片，排除Pixabay链接失效的可能。

内容的提问来源于stack exchange，提问作者Fuad Rustamzade