When working with image links from pixabay, I encountered an issue where the images were not displaying in the img tag even though they were successfully logged to the console. It's worth noting that I am using tailwind CSS for styling.
Here is the code snippet from App.js where I mapped over the array of images:
<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 here is the Image component I attempted to use:
function Image({image}) {
return (
<div>
<img src={image.webformatURL}/>
{console.log(image.webformatURL)}
</div>
)
}
export {Image}