Embedded image URLs are not dynamically generated when field is rendered

[johndwells]

Describe the bug

Our experience is coming from Redactor, for context.

We have a client that has embedded images into a Vizy field, and saved their work. Later, any number of things might occur:

• the client reorganizes their assets, moving the image into a new folder
• the client decides to rename the file itself
• we migrate our content to a local/staging environment for dev/testing

In any of these cases when using Redactor, the image's URLs are always "correct", i.e. the <img> tag's src= value has been updated to the image's current location, environment URL structure, etc.

In the CMS if we view the HTML source for the field, the src= value looks like this:

https://domain.com/volumes/images/test.jpg#asset:85061:url

It's that #asset:85061:url value at the end that Redactor picks up and then makes sure whenever it's saving the entry, or outputting on the front-end, that the image URL is correct.

But we are finding that with Vizy, this is not the case.

Steps to reproduce

1. Create Vizy field that allows images to be embedded
2. Add field to entry layout
3. Create entry, and embed an image asset into field
4. Save changes
5. Go to Assets, and rename or relocate asset to a new subfolder
6. Visit entry on front-end

Expected result: image should render

Actual result: image is broken

Craft CMS version

4.9.2

Plugin version

2.1.19

Multi-site?

No response

Additional context

No response

[engram-design]

Vizy is certainly supposed to mimic that functionality, because I agree - images/assets need to be a reference as they can be moved.

I assume we're talking about an Image node:

if you inspect the source of the node using the HTML button, can you confirm what you see? For a quick test on my end, I'd get the URL that you'd expect:

<figure class="vui-editor-img-wrap" tabindex="-1"><img src="http://vizy.test/uploads/examples/wide/beth-smith-pltSxmU1Vg0-unsplash.jpg#asset:694:transform:wide" title="Beth smith plt Sxm U1 Vg0 unsplash" alt="Beth smith plt Sxm U1 Vg0 unsplash"></figure>

[johndwells]

OK good to know that Vizy is supposed to do this!

Here's what I see when I inspect the source of the node using the HTML button:

<figure class="vui-editor-img-wrap" tabindex="-1"><img src="https://crooked-antechinus.transforms.svdcdn.com/production/images/photocredits_chiara_becattini_4.800x0_9ed0fd83c0e67da5bb1852cd50586505.jpg?w=1024&amp;h=683&amp;auto=compress%2Cformat&amp;fit=crop&amp;dm=1707131570&amp;s=3b7cec13ce6cf55e4bd56f026784b6c7" title="Chiara Becattini " alt="Chiara Becattini "></figure>

It's worth pointing out that this is a project running on Servd, so it "overrides" the asset URL to be sure that it's served via its image CDN. In this case I don't even think there's a transform rule that's been set on the image, but the CDN url still includes some formatting parameters.

So is it possible that the Servd plugin is overwriting the appending of #asset:694:transform:wide? If that's the case I can ping them on this issue.

[johndwells]

Hmm so I've just tested again, running locally, disabled the Servd plugin, using a local assets volume, and I'm still not seeing that hash value appended to the image URL:

<figure class="vui-editor-img-wrap" tabindex="-1"><img src="https://jahl.ddev.site/volumes/images/JOHN-TEST/JOHN_TEST.jpg" title="JOHN TEST" alt="JOHN TEST"></figure>

My journey is straightforward: place cursor inside Vizy field; click Image button; select asset; click insert.

[engram-design]

That's interesting, I was thinking it might have been Servd related, but thanks for testing locally as well.

But I believe I see the issue. When you don't pick a transform, it will just be the raw URL.

Fixed for the next release. To get this early, run composer require verbb/vizy:"dev-craft-4 as 2.1.19".

[engram-design]

Fixed in 2.1.20