How to resolve image issue in the RTF field in DXA 1.2

Question

I'm testing scenario for one of Component it is having RTF field.

In the RTF field I have added image and preview the Component with respective Component Template without any issue JSON is populated and inserted the same Component to the Page and preview the Page that is also populating fine.

When I hit page getting an error "A problem occurred while rendering this section"

Please provide me your inputs

# Model 

public class Article : EntityModel
{
    public List<_Article> Articles { get; set; }
}

public class _Article : EntityModel
{
    public string Title { get; set; }
    public string Article_Text { get; set; }
    public Image Image { get; set; }
    public string Image_Position { get; set; }
}

# View 

if (Model.Articles != null)
{
  foreach (var article in Model.Articles)
  {
    if (article.Image != null)
    {
       if (article.Image_Position.ToLower() == "left")
       {
         <div class="article">
           <div @Html.DxaPropertyMarkup(() => article.Image)>
             <img src="@article.Image.Url" alt="@article.Image.Alternate_Text" />
           </div>
           <div class="article-content">
           @if (article.Title != null)
           {
             <div>
               @Html.DxaPropertyMarkup(() => article.Title)>
               <h2> @article.Title</h2>
             </div>
           }
           <hr class="article-underline" />
           @if (article.Article_Text != null)
           {
             <div @Html.DxaPropertyMarkup(() => article.Article_Text)>
               @Html.DxaRichText(article.Article_Text)
             </div>
           }
         </div>
         <div class="clear"></div>
       </div>
     }

added right logs find out this error

ERROR - Unable to map field 'article' to property of type 'WFA.Web.Site.Models._Article'.
Sdl.Web.Common.DxaException: Unable to map field 'article' to property of type 'WFA.Web.Site.Models._Article'. ---> Sdl.Web.Common.DxaException: Unable to map field 'article_text' to property of type 'System.String'. ---> System.MissingMethodException: Cannot create an abstract class.
   at System.RuntimeTypeHandle.CreateInstance(RuntimeType type, Boolean publicOnly, Boolean noCheck, Boolean& canBeCached, RuntimeMethodHandleInternal& ctor, Boolean& bNeedSecurityCheck)
   at System.RuntimeType.CreateInstanceSlow(Boolean publicOnly, Boolean skipCheckThis, Boolean fillCache, StackCrawlMark& stackMark)
   at System.Activator.CreateInstance(Type type, Boolean nonPublic)
   at System.Activator.CreateInstance(Type type)
   at Sdl.Web.Tridion.Mapping.DefaultRichTextProcessor.ResolveRichText(XmlDocument doc, Localization localization) in c:\Users\U448276\Desktop\Temp\DotNet\R4.16\Trunk\Sdl.Web.Tridion\Mapping\DefaultRichTextProcessor.cs:line 116
   at Sdl.Web.Tridion.Mapping.DefaultRichTextProcessor.ProcessRichText(String xhtml, Localization localization) in c:\Users\U448276\Desktop\Temp\DotNet\R4.16\Trunk\Sdl.Web.Tridion\Mapping\DefaultRichTextProcessor.cs:line 46
   at Sdl.Web.Tridion.Mapping.DefaultModelBuilder.MapFieldValues(IField field, Type modelType, Boolean multival, MappingData mapData) in c:\Users\U448276\Desktop\Temp\DotNet\R4.16\Trunk\Sdl.Web.Tridion\Mapping\DefaultModelBuilder.cs:line 633
   --- End of inner exception stack trace ---

Answer 1

The first error in the error message (Unable to map field 'article' to property of type 'WFA.Web.Site.Models._Article') is something I'll come back on later, let's first discuss the second error (Unable to map field 'article_text' to property of type 'System.String'):

It mentions it is unable to map your RTF field to a string, which is correct since in DXA 1.2 you need to map it to RichText, see for example https://github.com/sdl/dxa-web-application-dotnet/blob/release/1.2/Sdl.Web.Common/Models/Entity/Paragraph.cs

So your Model should look something like:

public class _Article : EntityModel
{
    public string Title { get; set; }
    public RichText Article_text { get; set; }
    public Image Image { get; set; }
    public string Image_Position { get; set; }
}

Now on the first error it seems to have a problem with the multi value _Articles. To figure the correct notation of all of this out, we would need some more detailed information about your Schemas. But let me try and describe how it should be solved.

If you do not annotate your View Models with semantics, the following default semantics are applied:

• When attempting to populate a View Model property from the Content Manager model, look for a Schema field with the same name, but using camelCasing instead of PascalCasing. For example, the property Headline is mapped to Schema field headline.
• When attempting to populate a property of type List, remove any trailing s's from the property name. For example, the Paragraphs property is mapped to Schema field paragraph.

So your Article Schema should have a multi value Embedded Schema field named article (note the casing). then your Model can look like this:

public class Article : EntityModel
{
    public List<_Article> Articles { get; set; }
}

But for clarity I would call the schema field something like articleListElement and put it like this in your model List<_Article> ArticleListElements

Also the naming of the Model Article as a list and _Article as the list elements is not very descriptive, I would suggest ArticleList and Article (keep in mind that if you use your own Article Schema and Model, you should make sure it does not get confused with the DXA core Article Schema and Model, so maybe even better use something like MyArticle instead).

Answer 2

Let's focus on the root cause of this error: "Cannot create an (instance of an) abstract class".

In the stack trace you can see that the exception occurs in DefaultRichTextProcessor line 116, where it calls Activator.CreateInstance. Let's check the source code: https://github.com/sdl/dxa-web-application-dotnet/blob/release/1.2/Sdl.Web.Tridion/Mapping/DefaultRichTextProcessor.cs

It indeed calls Activator.CreateInstance and apparently it passes in an abstract class (so a class which is intended as base class only and cannot be instantiated).

What DefaultRichTextProcessor does when it finds an img tag within the Rich Text is: it obtains the (Multimedia) Schema ID from the data-SchemaUri attribute and then tries to find a subclass of MediaItem through semantic mappings. If it doesn't find such a subclass, it logs a WARNing and falls back to class MediaItem itself. This is a rather unfortunate fallback, because class MediaItem is abstract (error handling has been improved in later DXA releases) resulting it this ERROR.

So: check the log file for a WARNing preceding this error.

In general, you have to ensure that for all Schemas you use for the MM Components embedded in Rich Text, you have associated View Models (concrete subclasses of class MediaItem) through semantic mapping.