Search code examples
amazon-web-servicesvue.jsamazon-s3strapigridsome

Images not rendering on-page in vue v-for from S3 uploaded into Strapi admin

I have an API call that is publically accessible:

https://g1c0r7af15.execute-api.eu-west-1.amazonaws.com/dev/api/portfolio-items?filters[category][$eq]=Portraits&populate=image

The API is a strapi app that has had images uploaded to it and the images are hosted in S3.

I am trying to render the images in a v-for in a Gridsome app but all I see is an empty page with the images visible in the inspector but not on the page - the URL's of the images when individually accessed display the images fine in a browser:

inspector screenshot

All my <li> items are like this, the images are "there" but aren't being displayed. Can anyone offer any insight as to why? They show fine in the Strapi admin and when placed in the HTML statically, my S3 bucket is public and I have no issues accessing the individual image URL's that render inside the v-for and seeing the images in a new tab:

An example URL of the image in the screenshot here:

https://nazart-backend-dev-s3staticbucket-1w4isti2cbult.s3.eu-west-1.amazonaws.com/Karoline_01_b3af2ebc3e.jpg

I have double checked in Chrome also. It's completely baffling me.

Solution

  • .drag-galery__item class is setting the opacity 0, this is making the image invisible