I take image links from pixabay and map over the array. I can console log them but it doesn't s-CodePudding

I take image links from pixabay and map over the array. I can console log them but it doesn't show up in img tag.
P.S. I use tailwind for css

This is code of mapping App.js

 <div className='flex relative h-1/2 w-1/2'>
        {images.map((image, i) => {
          console.log(image.webformatURL);
          <Image key={i} image={image.webformatURL} alt='aa' className='w-20 h-56' />

        })}
      </div>

And this is where I try to use it:

function Image({image}) {
  return (
    <div>
        <img src={image.webformatURL}/>
        {console.log(image.webformatURL)}
    </div>
  )
}

export  {Image}

CodePudding user response：

Need to return the tag

  {images.map((image, i) => {
      console.log(image.webformatURL);
     return <Image key={i} image={image.webformatURL} />

    })}

Image tag should be like this

function Image({image}) {
  return (
    <div>
        <img src={image} alt='aa' className='w-20 h-56' /> 
    </div>
  )
}

export default Image