Embedded images in RTF field are not rendering correctly

Question

The problem is image is not rendering properly, we could see that it retrieved properly from content service, as i mentioned below. But when it reaches the entity model as RichText field it is changing as <p>Image(alternateText=Checkmark-small-Black-75)&nbsp;Rates are based on year-round coverage</p> and this is how it displays in browser.

Below is what we are adding in the RTF in tridion.

<img src="tcm:826-224817" title="Checkmark-small-Black-75" alt="Checkmark-small-Black-75" style="width: 30px; height: 30px;"/>

It is supposed to resolve something like this <p><img xlink:href="tcm:826-224815" data-schemauri="tcm:826-215972-8" data-multimediafilename="Checkmark-small-Black-75.png" data-multimediafilesize="401" data-multimediamimetype="image/png" title="Checkmark-small-Black-75" alt="Checkmark-small-Black-75" style="width: 30px; height: 30px;" xlink:title="Checkmark-small-Black-75" xmlns:xlink="http://www.w3.org/1999/xlink" src="//xxxxxx.xx.xxxx.net/media/Checkmark-small-Black-75_tcm826-224815.png?r=9">&nbsp; &nbsp;Free access to your personal finance management tool</p>

we have upgraded from dxa 1.5/ Tridion 2013 to dxa 1.8/web 8.5. It used to work fine in old environment, but after the upgrade its not.

From content service we recieve the below ->

"EmbeddedValues": [ { "bodyText": { "Name": "bodyText", "Values": [ <p><img xlink:href=\"tcm:826-224815\" data-schemaUri=\"tcm:826-215972-8\" data-multimediaFileName=\"Checkmark-small-Black-75.png\" data-multimediaFileSize=\"401\" data-multimediaMimeType=\"image/png\" title=\"Checkmark-small-Black-75\" alt=\"Checkmark-small-Black-75\" style=\"width: 30px; height: 30px;\" xlink:title=\"Checkmark-small-Black-75\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" src=\"//example.com/media/Checkmark-small-Black-75_tcm826-224815.png?r=9\" /> Rates are based on year-round coverage</p> ]

I have debugged the app, but its something happening inside SemanticMapper in DXA .

All we are doing in the view model is extending the AbstractEnityModel. And when we debug we found that the bodyText field is not getting rendered value. In between we don't have any custom logic. So DXA process the json and in view model we are getting the values.

@SemanticEntity(entityName = "RTCParagraph", vocabulary = SDL_CORE, prefix = "rt") public class RTCParagraph extends AbstractEntityModel { @JsonProperty("bodyText") @SemanticProperty("rt:bodyText") private RichText bodyText;

Below is how it is getting diplayed in view.

<jsp:useBean id="entity" type="com.sdl.modules.nationwide.model.common.RTCParagraph" scope="request" />
...
..
.
<c:if test="${not empty entity.bodyText}">
     ${entity.bodyText}
</c:if>

I think it somthing similar to this post for DXA 2.0 Embedding DXA entities other than images in RTF fields

Can any one help on this please ?

UPDATE 1

After updating the view with dxa:richtext tag, we could see some improvement but the image is not rendering still.<img src="//xxxx.xx.xx.xxx.net/media/Checkmark-small-Black-75_tcm826-224815_w1024_n.png?r=9" alt="Checkmark-small-Black-75" data-aspect="0" width=""> this is because the image is appended with _w1024_n, i am not sure why that is getting appended, if we could avoid that like this (Checkmark-small-Black-75_tcm826-224815.png) it will render properly.

UPDATE 2

We found that the issue is happening within processRichText method, in com.sdl.webapp.tridion.mapping.DefaultRichTextProcessor. We are getting the document value as [#document: null] and resolveRichText return as Image(alternateText=Checkmark-small-Black-75).However if there is any exception while parsing, it goes to catch block and we are getting image rendered properly.

xhtml value :- <img xlink:href="tcm:826-224815" data-schemaUri="tcm:826-215972-8" data-multimediaFileName="Checkmark-small-Black-75.png" data-multimediaFileSize="401" data-multimediaMimeType="image/png" title="Checkmark-small-Black-75" alt="Checkmark-small-Black-75" style="width: 30px; height: 30px;" xlink:title="Checkmark-small-Black-75" xmlns:xlink="http://www.w3.org/1999/xlink" src="//xxxx.xx.xx.xxx.x/media/Checkmark-small-Black-75_tcm826-224815.png?r=9" />

 public RichText processRichText(String xhtml, Localization localization) {
    try {
        // Parse the document as XML
        final Document document = XMLUtils.parse("<xhtml>" + xhtml + "</xhtml>");

        // Resolve links, images and YouTube videos
        return resolveRichText(document, localization);
    } catch (SAXException | IOException | ContentProviderException | SemanticMappingException e) {
        LOG.warn("Exception while parsing or processing XML content", e);
        return new RichText(xhtml);
    }
}

Update 3:

When I debug the RTF “headingText” field. The fragments object shows the proper URL(PFA of the screen shot - http://www.filedropper.com/fragments ) but View is resolving only alternateText. Any thought why ?

Answer 1

Note that the img XHTML element is supposed to be converted to an Entity Model (MediaItem-derived) which in turn should get rendered to HTML (using an appropriate View).

From what you are showing, it seems that the MediaItem-derived Entity Model is properly constructed (class Image), but it is not properly rendered as HTML, but instead its toString representation is rendered.

You would have to provide more information about how you’re rendering your View Models.

UPDATE

I think the problem lies in your View: you should use the dxa:richtext tag to render properties of type RichText.

For example, see: https://github.com/sdl/dxa-modules/blob/master/webapp-java/dxa-module-core/src/main/resources/META-INF/resources/WEB-INF/Views/Core/Entity/Article.jsp