[bug]: No category & product images displayed (404)

[kweij]

Describe the bug
Images of categories & products are not shown on the frontend -- instead the request returns a 404. Following that image-url yields a 404 with the body-text:
Error: ENOENT: no such file or directory, stat '/Users/kweij/Sites/m23pwa/venia/packages/venia-concept/dist/media/catalog/product/cache/71287b63bb7e25fa4a2739e268ab5a2f/v/a/va04-ll_main_2.jpg'

To Reproduce
I have a local Magento 2.3.2 instance running, loaded with the Venia sample-data, running locally at "http://m23pwa.docksal" (mapped to the /pub in the docksal vhost configuration). The storefront is configured to use this endpoint as MAGENTO_BACKEND_URL. Categories and products are displayed, just not the image.

Steps to reproduce the behavior:

1. Go to the home page that should display category images
2. Click on any category to view products that should display product images

Expected behavior
Images being displayed.

Screenshots

Additional context
I'm a dedicated M2 frontend developer, but very new to the whole PWA-studio/Venia/UPWARD/React/... stack, so please pardon my slow learning curve.

The images have a relative URL (starting with /media/catalog/..) and if I prepend it with the MAGENTO_BACKEND_URL it points correctly to the (unscaled) image. It seems that the service-worker that handles the URL's to the /media/catalog images it not running/fetching the data correctly -- but this statement come from a n00b in the area of service-workers, so .. you know.

Possible solutions
Add any ideas about possible solutions to the problem here.

Please complete the following device information:

• Device [e.g. iPhone6, PC, Mac, Pixel3]: MacBook Pro
• OS [e.g. iOS8.1, Windows 10]: macOS
• Browser [e.g. Chrome, Safari]: Chrome
• Browser Version [e.g. 22]: @latest
• Magento Version: 2.3.2
• PWA Studio Version: 3.0.0 (@Dev-Master: 1ee241b)
• NPM version npm -v: 6.10.3
• Node Version node -v: v10.15.2

Please let us know what packages this bug is in regards to:

• venia-concept
• venia-ui
• pwa-buildpack
• peregrine
• pwa-devdocs
• upward-js
• upward-spec
  * I'm not sure where the problem resides, might also be on this very chair

[sirugh]

@kweij we recently merged a big change to the structure of the repo. Can you try cleaning and reinstalling?

yarn clean:all && yarn
yarn watch:all

[Banhawy]

I'm having the same issue with a fresh install of both PWA studio and M2 backend. Weirdly enough, some images work fine while the majority are not displaying. I can say that all the images I use in the backend are *.jpg

[kweij]

@sirugh, running the proposed commands (incl. git pull -r ) and thus fully updating to the latest @dev-master release has not fixed the problem

yarn clean:all && yarn
yarn watch:all

The <img src that is rendered for a product image is, for example /media/catalog/product/cache/71287b63bb7e25fa4a2739e268ab5a2f/v/p/vp01-ll_main_2.jpg?auto=webp&format=pjpg&width=300&height=375. Is this like it should be, anyway?

[sirugh]

@kweij Hmm ok what if you drop the &height=375 from the url? Also try without all of the query params if possible. If I could repro locally it'd be easier but I can't unfortunately. Feel free to reach out to me on slack and we can try to do some debugging in real time.

[kweij]

@sirugh Dropping &height=375 or all query string params does not yield a different result, still no images.

But to see where the problem resides: is the URL to the image I mentioned above correct (comparable to your local environment)? Because if the URL isn't correct I should look into the URL generation, else I should look into the handler of that URL (a service-worker?).

Maybe relevant is that I run my backend on a docker container, using Docksal, but that doesn't seem to influence the GraphQL connection.

[sirugh]

@Banhawy are you also using docker?

[sirugh]

@kweij compare your findings to the deployed version at veniapwa.com

[Banhawy]

@sirugh No, I am using normal local environment also on MacOS.

[kweij]

@kweij compare your findings to the deployed version at veniapwa.com

Thanks! That's definitely a different URL to the image:

/img/resize/300?url=%2Fmedia%2Fcatalog%2Fproduct%2Fcache%2F90e62e6c776404d5aaa0e0d3e9f7d9af%2Fv%2Fa%2Fva06-ly_main_2.jpg

So something's off at the generation of the URL to the image.

[kweij]

It's working in the current develop version, so .. whatever it was, it's fixed.

[Monika-Thakur]

No its not working.