Strapi with Tailwind (populate)(img)

Hello, I have had problems with the images, I am creating an e-commerce using strapi and tailwind. I make the call with axios to the api, but the images do not load me.

in the postman with the GET request I get the following: http://localhost:1338/api/products?populate[img][populate][0]=attributes.url

"data": [
            "id": 1,
            "attributes": {
                "createdAt": "2022-07-21T16:02:16.965Z",
                "updatedAt": "2022-08-11T01:02:26.417Z",
                "publishedAt": "2022-07-21T16:03:45.251Z",
                "tittle": "eleven",
                "description": "\"Stranger Things\" ",
                "price": 90,
                "qty": 1,
                "creationDate": "2022-07-25",
                "img": {
                    "data": [
                            "id": 16,
                            "attributes": {
                                "name": "eleven.jpg",
                                "alternativeText": "eleven.jpg",
                                "caption": "eleven.jpg",
                                "width": 1000,
                                "height": 1000,
                                "formats": {
                                    "thumbnail": {
                                        "name": "thumbnail_eleven.jpg",
                                        "hash": "thumbnail_eleven_463d3b72f9",
                                        "ext": ".jpg",
                                        "mime": "image/jpeg",
                                        "path": null,
                                        "width": 156,
                                        "height": 156,
                                        "size": 6.52,
                                        "url": "/uploads/thumbnail_eleven_463d3b72f9.jpg"
                                    "medium": {
                                        "name": "medium_eleven.jpg",
                                        "hash": "medium_eleven_463d3b72f9",
                                        "ext": ".jpg",
                                        "mime": "image/jpeg",
                                        "path": null,
                                        "width": 750,
                                        "height": 750,
                                        "size": 90.82,
                                        "url": "/uploads/medium_eleven_463d3b72f9.jpg"
                                    "small": {
                                        "name": "small_eleven.jpg",
                                        "hash": "small_eleven_463d3b72f9",
                                        "ext": ".jpg",
                                        "mime": "image/jpeg",
                                        "path": null,
                                        "width": 500,
                                        "height": 500,
                                        "size": 44.62,
                                        "url": "/uploads/small_eleven_463d3b72f9.jpg"
                                "hash": "eleven_463d3b72f9",
                                "ext": ".jpg",
                                "mime": "image/jpeg",
                                "size": 153.4,
                                "url": "/uploads/eleven_463d3b72f9.jpg",
                                "previewUrl": null,
                                "provider": "local",
                                "provider_metadata": null,
                                "createdAt": "2022-08-11T01:02:14.523Z",
                                "updatedAt": "2022-08-11T01:02:14.523Z"

I get the call to the api by axios in the following way:

products.getInitialProps = async() => {
  try {
    const resOne = await axios.get(`${process.env.apiPublicUrl}/products`);

    const products =;
    return { products };

  } catch (error) {
    return { error };

I pass a .map to get the data from the api:

{ => (
            <div key={} className="group relative">
              <div className="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
                <img src={`${process.env.imagenURL}/eleven_463d3b72f9.jpg`} alt={product.attributes.tittle} className="w-full h-full object-center object-cover lg:w-full lg:h-full" />
              <div className="mt-4 flex justify-between">
                  <h3 className="text-sm text-gray-700">
                    <a href={product.href}>
                      <span aria-hidden="true" className="" />
                  <p className="mt-1 text-sm text-gray-500">{product.attributes.description}</p>
                <p className="text-sm font-medium text-gray-900">${product.attributes.price}</p>
                <button onClick={() => handleCLick(product)} className="origin-center hover:translate-y-0.5 delay-btn duration-150 mt-3 w-full h-10 border-4 border-black bg-pink-300 hover:bg-pink-400 shadow-btn1 font-Roboto text-base">
                  Add to cart

I can’t find a way to get the images, any suggestions or help?

thanks and regards

System Information
  • Strapi Version: v4
  • Operating System: windows
  • Node Version: 16.16.0
  • NPM Version: 8.15.0

Hello everyone,
I have found the solution by following the strapi documentation. install qs and create an api call, then in the src use the following syntax:

                  className="w-full h-full object-center object-cover lg:w-full lg:h-full"

I hope it works for you, if not, please leave a comment and I will help to solve it as soon as possible.