Displaying images from API / vue templating issue

Hi,

I followed this tutorial on Strapi (as backend) and Nuxt (as fronted)

https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-bonus-deploy-part-7-7/

The backend was deployed with Heroku and contains the data (including images) I need to show on the front end. Images are stored in Amazon S3 and served to the backend.

I tried to deploy the fronted to Netlify as described in the tutorial. I added also the config variable for API_URL. However after several attempts I always get “Page not found” on a black screen at the end of deployment. How can I fix that issue?

Thanks

Can you share a link to the netlify site that you’re having trouble with? Also does your nuxt.js site build locally on your own machine? What have you already tried to debug the issue?

Here is the link to my Netlify site:

https://modest-noyce-f634e2.netlify.com

Now I see the site. But I cannot see the images.

Yes, Nuxt site was built locally.

Thanks

That is not the URL for the site @andmog - perhaps you moved it in the meantime? Could you let us know the URL and not change the netlify sitename after you do so we can take a look? (note that our office is closed over the weekend so we almost certainly won’t get back to you until Monday)

Sorry, I deleted that app…
Here is the one I have just created:

https://dazzling-shannon-a3509e.netlify.com

Again, I got black screen.

Thank you for your help.

The page is rendering for me & the “See Dishes” view is working too, but your image URL’s look a bit mangled:
<img src="https://alvin77.herokuapp.comhttps://deliveroo-andmog.s3.eu-central-1.amazonaws.com/7658dfb7569948c4a8293eb39fdcab5f.jpg" class="card-img-top">

The final image URL is accessible directly if you remove that prefix of the Heroku app.

Thanks.
How can I remove the Heroku app prefix?
I tried to delete the API_URL = https://alvin77.herokuapp.com
However in the html code i still see

Thanks!

The image URL’s are built in the vue.js files e.g. at the bottom of this file:

I dint know the full structure of this app, but it appears to be expecting the images to be served up from the API hosted on Heroku, rather than external sources.

My guess is that whatevers populating the backend on that API is setting what should be a filename, to an absolute URL for an external image, rather than saving a file in the API and just storing the filename.

Try changing this line

restaurant.image.url = `${apiUrl}${restaurant.image.url}`

to

restaurant.image.url = `${restaurant.image.url}`

Thank you for your suggestion. Now it works!
I have one question: the fronted was built with Nuxt. I inserted ‘nam run generate’ command into ‘Build command’ with ‘list’ as ‘Publish directory’ to generate a static site. I linked the app deployed to Netlify to a Github repository . However I do not see the ‘list’ folder created in my GitHub repository after running ‘nam run generate’. Do you know why? Thank you.

Netlify doesn’t add anything to your repo on Github. It just needs to know the publish directory (dist, build, etc) so it knows where to find the files to upload them to your site basically.