Question

I have a HTML inside a string variable, which contains some <img> tags. I want to replace the src attribute with data-realsrc attribute and put loading.gif in src attribute.

For example, if this is one of <img> tags:

<img src="Hello.jpg" />

I want to change it to:

<img data-realsrc="Hello.jpg" src="loading.gif" />

It should be applied to all <img> tags inside the HTML.

Please note that I want to do it server-side with c#.

How to do that?

What is the simplest way? What is the fastest way?

Answer 1

using HtmlAgilityPack

HtmlAgilityPack.HtmlDocument doc = new HtmlAgilityPack.HtmlDocument();
doc.LoadHtml(@"<img src=""Hello.jpg"" />");

foreach (var img in doc.DocumentNode.Descendants("img"))
{
    var realSource = img.Attributes["data-realsrc"];

    if (realSource != null)
        realSource.Value = img.Attributes["src"].Value;
    else
        img.Attributes.Add("data-realsrc", img.Attributes["src"].Value);

    img.Attributes["src"].Value = "loading.gif";
}