Inserting image into Rich Text Field Widget not working

Kentico Dev asked on October 24, 2019 19:35

I have pages in Kentico 12 where the user has added a rich text editor and attempted to insert inline images via media library and also direct upload. This all works fine while in the admin preview of the page, but on the actual client-facing site, the link to the image is broken.

For example, the source for the page is trying to load the image like this:

<img alt="my_image.jpg" src="~/getattachment/9e73aea8-8a8f-497f-8b25-4f233a6cb719/my_image.jpg" style="width: 239px; height: 241px;" title="my_image.jpg">

And if I copy the broken image address, the URL is this:

https://mysite.com/about/~/getattachment/9e73aea8-8a8f-497f-8b25-4f233a6cb719/my_image.jpg

I've tried the solutions listed here without success.

Is there a way to get this working?

Correct Answer

Juraj Ondrus answered on October 28, 2019 14:08

In this case, you should be using @Html.Kentico().ResolveUrls(Model.< Rich text field content >) as described here.

0 votesVote for this answer Unmark Correct answer

Recent Answers

Juraj Ondrus answered on October 25, 2019 14:21

What is the base web part for the widget and what is the code to parse the field and resolve the relative URL?
Also, what are the output filter settings? In the URL the ~ sign is not resolved - I guess if you remove it, the URL will work. This could indicate that the output filter is turned off. By default it should look like this.

1 votesVote for this answer Mark as a Correct answer

Kentico Dev answered on October 25, 2019 16:05

It's not in a web part, it is in an MVC page type that we set up. The page type has custom fields, one of them being the Content field holding the data in my initial post. Its data type is "Long Text" and the form control is "Rich text editor". The code is being parsed like this in our MVC view:

@Html.Raw(Model.Content)

Within the rich text editor, the user is embedding images. In the source of the rich text editor, there is no ~ sign:

<img alt="my_image.jpg" src="/getattachment/9e73aea8-8a8f-497f-8b25-4f233a6cb719/my_image.jpg" style="width: 239px; height: 241px;" title="my_image.jpg" />

The output filter is set up just as the image you linked.

0 votesVote for this answer Mark as a Correct answer

Juraj Ondrus answered on October 28, 2019 05:53

Could you please confirm that in your MVC code you are following this documentation on displaying page attachments and that you are using e.g. @Url.Kentico().ImageUrl(...)?

1 votesVote for this answer Mark as a Correct answer

Kentico Dev answered on October 28, 2019 13:56

In this case, @Url.Kentico().ImageUrl(...) is not being used as the content of this field is HTML that could be anything produced from a Rich Text Editor widget.

0 votesVote for this answer Mark as a Correct answer

Kentico Dev answered on October 28, 2019 14:23 (last edited on October 28, 2019 14:25)

Thank you Juraj, that's exactly what I needed.

EDIT: Your answer seems to have been removed: using @Html.Kentico().ResolveUrls(<Model.Content>) is what worked for me. Thanks again.

0 votesVote for this answer Mark as a Correct answer