[bug]: Static image not served properly

[0m3r]

magento 2.4.5 pwa-studio 12.6

Describe the bug

Static image not served properly

To reproduce

Steps to reproduce the behavior:

1. Create a static block with the name "footer" and content like below with {{view }} directive https://www.atwix.com/magento-2/directives/

2. Add pseudo-HTML

<div class="footer-logo">
        <img src="{{view url='images/loader-1.gif'}}" alt="Footer Logo" width="51" height="51" />
    </div>

4. Image must exist, for example, you can use images/loader-1.gif. It already exists even in luma

➜  magento245.local git:(master) ✗ ll pub/static/frontend/Magento/luma/en_US/images/loader-1.gif
lrwxrwxrwx 1 www-data www-data 41 вер 14 10:35 pub/static/frontend/Magento/luma/en_US/images/loader-1.gif -> /var/www/html/lib/web/images/loader-1.gif

5. For luma it works. but in PWA-studio isn't

Error: ENOENT: no such file or directory, stat '/home/om3r/Work/pwa-studio-fundamentals-12.6/static/version1663140953/frontend/Magento/luma/en_US/images/loader-1.gif'

Expected behavior

I want to see the image

Related issues

https://github.com/magento/pwa-studio/issues/3069

Possible solutions

I have only a workaround

https://github.com/magento/pwa-studio/blob/c1a5670d5f9030cf55d6295799abf71fdec38c31/packages/venia-ui/lib/components/RichContent/plainHtmlRenderer.js#L2

https://github.com/magento/pwa-studio/blob/c1a5670d5f9030cf55d6295799abf71fdec38c31/packages/peregrine/lib/util/htmlStringImgUrlConverter.js#L14-L17

In htmlStringImgUrlConverter.js I can prevent URL converting

    for (const imgElement of temporaryElement.getElementsByTagName('img')) {
        if (imgElement.src.startsWith(process.env.MAGENTO_BACKEND_URL + 'static/')) {
            continue;
        }
        imgElement.src = makeUrl(imgElement.src, {
            type: 'image-wysiwyg',
            quality: 85
        });
    }

I think it needs to improve resources routing

Debug Report

buildpack generate-build-report ℹ Generating build report for [email protected]. This may take a moment.

ℹ Inspecting Dependencies Found 9 @magento dependencies in yarn.lock @magento/pwa-buildpack @ 11.4.0 @adobe/apollo-link-mutation-queue @ 1.0.2 @magento/babel-preset-peregrine @ 1.2.1 @magento/eslint-config @ 1.5.3 @magento/pagebuilder @ 7.4.1 @magento/peregrine @ 12.5.1 @magento/pwa-theme-venia @ 1.3.0 @magento/upward-security-headers @ 1.0.10 @magento/venia-ui @ 9.6.0

ℹ Inspecting Magento Backend Not using sample backend. Backend is UP!

ℹ Inspecting System OS: #51-Ubuntu SMP Thu Aug 11 07:51:15 UTC 2022 Node Version: v16.17.0 NPM Version: 8.19.1

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

• [ ] venia-concept
• [x] venia-ui
• [ ] pwa-buildpack
• [x] peregrine
• [ ] pwa-devdocs
• [ ] upward-js
• [ ] upward-spec
• [ ] create-pwa

[m2-assistant[bot]]

Hi @0m3r. Thank you for your report. To speed up processing of this issue, make sure that you provided sufficient information.

Add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[anthoula]

@adobe export issue to JIRA project PWA as Bug

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.adobe.com/browse/PWA-2993 is successfully created for this GitHub issue.

[anthoula]

Thanks @0m3r , GIFs are currently not supported in pwa-studio.