V8.2 - Image in RTE looses it's Url

[jvtroyen]

I was working in 8.1.5, when I noticed that Items retrieved on an APIController, have an empty Url for Image properties.
I.e. the Image property is there, it has an Id and UmbracoFile.Src and all, but Url is empty.

I upgraded to 8.2, just to see if it was a bug that was fixed, and now there's a secondary issue, and the purpose of this ticket.
If I add an image to a RTE inside a grid, it is initially displayed fine, but when I save and publish, it vanishes.

The code when I insert the image is <img src="/media/1016/warning.jpg" alt="" data-udi="umb://media/e375b74ab95140df9f5b3eb7d121ab95" />
After saving, the src-tag is gone : <img alt="" data-udi="umb://media/e375b74ab95140df9f5b3eb7d121ab95" />

I have reverted my code to 8.1.5 and this behaviour is now working again.

I can't help but feel it may be related to the Url being empty.

Reproduction

Add an image to an RTE field inside a Grid.

Expected result

Image keeps it's src-tag

Actual result

src-tag becomes empty after save.

---

This item has been added to our backlog AB#3246

[jmaxwell1562]

I am also having this issue with a new install of 8.2

[AndersBrohus-MySupport]

This is the URL i get :)
Simply the ImageProcessor part :)

<img src="?width=500&amp;height=110.86123604864234" alt="" width="500" height="110.86123604864234" data-udi="umb://media/589ff1069ce441738f185b0002c385d5">

[clausjensen]

I'm not really sure what you guys are doing to make this happen in the RTE.

I've just tested in v8/dev latest.. and I've tested from the 8.2.0 tagged commit - and I've tested again from the official 8.2.0 package downloaded from Our.

I tried adding a RTE directly on a doctype, adding an image (clicked the insert media button and then dragged an image into the media library and selecting it).
I tried adding a grid with a RTE to my doctype and doing the same thing.
I tried manually removing width and height url parameters from the src tag to see if this could cause the issue.
I tried manually removing the width and height attributes on the img tag as well.

None of the above caused me any issues at all, neither when saving, resaving or saving+publishing, reloading or refreshing the browser in any way.

Could you please provide clear instructions as to how to make this happen - then we'd be happy to look into it.

We recently did changes on what is stored when storing images, so instead of storing an actual file path in src we simply store the ID of the media and then the added parameters remain in the src tag. When this is being rendered it passes through a value converter, which then will look up the real image path and put that into the src tag so it looks correct.

I do think there is a bug with this converter when an image is used in a RTE inside a grid and the value is then rendered in frontend - since it doesn't seem to actually map the file path back in the src property. I do however not see this issue unless the RTE is used inside a grid - it works fine when I render just a RTE with an image - and I also get a real url in the Url field when I get the value of this directly from a media item using our APIs.

Could you please elaborate on everything else, but the one confirmed bug I mentioned above?

[AndersBrohus-MySupport]

Hi @clausjensen :)

I had my project on Umbraco 8.1.3 and just upgraded it to 8.2 :)
In that project i have an Grid setup with some RTE's but when i use the "Insert Image" inside the RTE i do not get the URL out on the website only the ImageProcessor parameters, but inside the RTE's "View Source Code" i can see it :)

[clausjensen]

@AndersBrohus-MySupport Yep - that sounds like what I'm referring to above :) There's def. a bug when outputting the value of a RTE containing a image - when used inside a grid.

I however don't see any of this causing any issues at all for me in the backoffice (which is what I think the initial bug report is about?). So I would like some clarification on that...

[clausjensen]

@AndersBrohus-MySupport Could you perhaps create an issue describing your bug - I'd like to keep these two things separated ... if it turns out what is happening here is "just" the same as what you describe, we'll just close this issue as duplicate then.

[AndersBrohus-MySupport]

Of course @clausjensen :)

Right here, #6763

[rasmusjp]

To render links (and now images) in the RTE in the Grid you need to pass the RTE value to the TemplateUtilities methods the same way it's done in the RTE Value Converter

Umbraco-CMS/src/Umbraco.Web/PropertyEditors/ValueConverters/RteMacroRenderingValueConverter.cs

Lines 84 to 86 in 1d39a25

	sourceString = TemplateUtilities.ParseInternalLinks(sourceString, preview, Current.UmbracoContext);
	sourceString = TemplateUtilities.ResolveUrlsFromTextString(sourceString);
	sourceString = TemplateUtilities.ResolveMediaFromTextString(sourceString);

Ideally this would be handled in the Grid Value Converter, but I'm not sure if there's a nice way to do this.

[jvtroyen]

With what we know now, this looks more like a consequence of another bug, than a problem in itself.

Quickly summarizing:

• THIS issue (Update README.md #1) concerns images inside RTE in a grid losing their src-attribute
• the OTHER issue (Update README.md #2) = in 8.1.4 and 8.1.5, if you have a Doctype with an Image property, when the item is fetched, Image.Url is empty (posted in Our by me here - https://our.umbraco.com/forum/using-umbraco-and-getting-started/99547-imageurl-always-empty-correct-way-to-access-it)
• when upgrading to 8.2, issue Update README.md #1 occurs, but probably as a result of Update README.md #2, the Url property of the image being empty.
• reverting to 8.1.5 "solves" Update README.md #1, but only because the src is no longer affected

I'm leaning towards the use of AzureStorage for media as the possible culprit. A bug or bad configuration, ...

@jmaxwell1562, @AndersBrohus-MySupport - do you also use AzureStorage?

I will further investigate #2. If I can solve it, I'll update here as well. If not, I'll have to create a separate issue, and this one can probably be closed, right?

[AndersBrohus-MySupport]

We don't use AzureStorage, just the default :)

[rasmusjp]

The URLs being empty in RTEs are intentionally, see #6554. It's been done as part of introducing Media Url Providers since the url stored in the src might not be the correct one.

For more info see following issues: #4943 and #5123

[rasmusjp]

Hi @jvtroyen

I've not been able to reproduce your initial issue, I've tried the following code in a clean Umbraco 8.1, 8.1.5 and 8.2

public class TestController : UmbracoApiController
{
    [HttpGet]
    public IHttpActionResult Test()
    {
        var mediaAtRoot = UmbracoContext.Media.GetAtRoot();

        return Ok(from media in mediaAtRoot
            select new
            {
                name = media.Name,
                url = media.Url
            });
    }
}

and they all return the Url for Image and File uploaded at the root of the media section.

You've mentioned you are using the UmbracoFileSystemProviders.Azure, are you running the latest versions of the packages?

[jvtroyen]

Hi @rasmusjp ,

I've started from a clean 8.1.5 and 8.2 and they are working fine.
I then removed the AzureStorage from the project where I have the issue, and the Image.Url is still empty, so probably unrelated to that as well.

I can continue hunting no sooner than thursday. If I find anything new, I'll update.

[jmaxwell1562]

I also am not using Azure Storage. I was experimenting with the rich text editor in the grid.

[rasmusjp]

@jmaxwell1562 did you experience the problem in a custom controller or when rendering the grid in razor? if the latter, could you try updating Views/Partials/Grid/Editors/Rte.cshtml to what's mentioned in #6763 (comment)

[jmaxwell1562]

I'm just rendering the grid in razor. Updating the Rte.cshtml worked. Thanks.

[ZiringTawfique]

is this fix coming any time soon or should we update the rte.cshtml for now

[clausjensen]

@ZiringTawfique the fix will be included in 8.4.0 but you can update the Rte.cshtml as a solution until then 😃 (see: https://github.com/umbraco/Umbraco-CMS/pull/6810/files)

[clausjensen]

Closing this one - the Rte.cshtml fix is scheduled for 8.4.0 (#6763).