Azure-Samples / contoso-real-estate

Intelligent enterprise-grade reference architecture for JavaScript, featuring OpenAI integration, Azure Developer CLI template and Playwright tests.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Bug] Images in Blog are 500

dfberry opened this issue · comments

Are you accessing the project from the GitHub Codespaces?

  • No, I am running the project on my local machine (I will fill in the OS section below)
  • [X ] Yes, I am using GitHub Codespaces.

Note: The project is optimized to run on Codespaces. We welcome contributions to enhance it for cross-platform local development, but it's not something we will prioritize right now. Thank you!

Describe the bug
The blog cards don't display the images.

To Reproduce
Steps to reproduce the behavior:

  1. Go to blog home page
  2. Images don't display
  3. Open F12
  4. See 500s

https://ca-blog-shz2p7n3lm3x4.mangoforest-1c54540a.westeurope.azurecontainerapps.io/_next/image?url=http%3A%2F%2Flocalhost%3A1337%2Fuploads%2Fthis_shrimp_is_awesome_cf93a0ff5a.jpg&w=1200&q=75

Why is localhost in there?

  1. Click on card - see image

Expected behavior
See image on cards.

Screenshots
If applicable, add screenshots to help explain your problem.

image

OS (please complete the following information):

  • OS: Windows/Edge browser
  • OS Version:
  • npm version:
  • Node.js version:
  • output of azd version:

Additional context
Add any other context about the problem here.

Hi @dfberry any error log from deployment? This could have multiple origins: the blob storage failed to provision, the config was incorrectly setup at deployment...Is this the product of running azd up?

Can you reproduce a second time?

I ran azd provision then azd deploy. How do you typically use the --debug for provision and deploy? My storage container has no images.

image

Images in SWA/Portal works - looks like those are deployed with the SWA in the assets dir.

image

Images on CA/Blog home page doesn't work - I still think this is about localhost being the wrong domain for the images. /_next/image?url=http://localhost:1337/uploads/what_s_inside_a_black_hole_d7f3cc9ab8.jpg&w=1920&q=75

image

<div class="card-media">
    <img alt="what-s-inside-a-black-hole" loading="lazy" width="800" height="466" decoding="async"
        data-nimg="1"
        srcset="/_next/image?url=http%3A%2F%2Flocalhost%3A1337%2Fuploads%2Fwhat_s_inside_a_black_hole_d7f3cc9ab8.jpg&amp;w=828&amp;q=75 1x, /_next/image?url=http%3A%2F%2Flocalhost%3A1337%2Fuploads%2Fwhat_s_inside_a_black_hole_d7f3cc9ab8.jpg&amp;w=1920&amp;q=75 2x"
        src="/_next/image?url=http%3A%2F%2Flocalhost%3A1337%2Fuploads%2Fwhat_s_inside_a_black_hole_d7f3cc9ab8.jpg&amp;w=1920&amp;q=75"
        style="">
</div>

@anfibiacreativa Last we spoke you thought this was an issue with the provisioning with environment variables. Anything I can help with on this issue?

This was diagnosed as an issue with the container not starting. Fixed with #345

@anfibiacreativa The original issue wasn't in CodeSpaces/local development but was displayed in deployed resources. You can see that in the URL in the screenshot. Where does #345 address deployed resources?

@anfibiacreativa The original issue wasn't in CodeSpaces/local development but was displayed in deployed resources. You can see that in the URL in the screenshot. Where does #345 address deployed resources?

You're correct. This PR refers to a different issue that also resulted in 500's when containers fail to start. I reopened this one. Is this issue still valid?

@anfibiacreativa I will revalidate today. I'm also thinking about adding a test to verify.

Yes, it is still happening on deployed Azure @anfibiacreativa

@manekinekko @anfibiacreativa

I would like to fix this with

  1. a predeployment script which inserts the images into blob storage with Blob Storage SDK
  2. a postdeployment script which updates the CMS to use the correct blob URL with Strapi SDK
  3. a playwright test which verifies the images are not 404 on blog home page (FYI @nitya )

Thoughts?

@dfberry that would be great 👍

@dfberry any updates?

Closed due to inactivity.