[Bug]: Images are not loading properly with ipx

[drew-webscale]

Expected Behavior

Images showing up on my Vue Storefront website.

Actual Behavior

Errors like this:

http://magento.test:3000/_ipx/fit_cover,f_webp,s_496x840/homepage/bannerE 404 (IPX: File not found)

FYI this link works in my browser:

http://magento.test:3000/_ipx/fit_cover,f_webp,s_332x840/homepage/bannerF.webp

but this does not:

http://magento.test:3000/_ipx/fit_cover,f_webp,s_496x840/homepage/bannerF

Possible Solution

Seems like there should be a file extension (like .webp) on files.

Steps to reproduce

Connect Vue Storefront's default installation to a Magento 2.4.4 site and load any pages.

What version of Magento 2 integration are you using?

2.4.4

What version of Node.js are you using?

16

What browser (and version) are you using?

Chrome Version 103.0.5060.114 (Official Build) (arm64)

What operating system (and version) are you using?

MacOS Monterey 12.2.2

Relevant log output

I see errors like this in the console when loading pages:

http://magento.test:3000/_ipx/fit_cover,f_webp,s_496x840/homepage/bannerE 404 (IPX: File not found)

Code of Conduct

• I agree to follow this project's Code of Conduct

[Frodigo]

Hi, thanks for your report @drew-webscale. Looks like there is no file extension in the URL. It should be:

http://magento.test:3000/_ipx/fit_cover,f_webp,s_496x840/homepage/bannerE.webp

Probably it's the issue in Storefront UI, I will check taht.

[Frodigo]

This is fixed here: #1292 and will be released with the 1.0.2 release.