简体   繁体   中英

Dynamically add class to img tag from entire HTML

I have an rich editor which adds text and images,to make the images responsive

class="img-thumbnail"

is needed in all the image tags,so have used HtmlAgility pack to extract image tags from entire Html but how to add the class on each image tag.

Example

Input from html after extracting image tag

<img src="http://domain.com/images/image1.jpg">

Expected

<img src="http://domain.com/images/image1.jpg" class="img-thumbnail">

Code

 public string ParseImage(string pHtml)
    {

        HtmlDocument doc = new HtmlDocument();
        doc.LoadHtml(pHtml);
        var imgs = doc.DocumentNode.SelectNodes("//img");

        foreach (var item in imgs)
        {
            string orig = item.Attributes["src"].Value;
            //Add class to each img tag.
        }
      }

I guess the problem lies in that you need to save the HTML before you display it. Otherwise HTML Agility Pack sometimes omits the changed attributes.

public string ParseImage(string pHtml)
{

   HtmlDocument doc = new HtmlDocument();
   doc.LoadHtml(pHtml);
   var imgs = doc.DocumentNode.SelectNodes("//img");

    foreach (var item in imgs)
    {
        //string orig = item.Attributes["src"].Value;
        item.SetAttributeValue("class", "img-thumbnail");
        //Add class to each img tag.
    }
    using(StringWriter tw = new StringWriter ()){
        doc.Save(tw);
        return tw.ToString();
    }
 }

You can add attributes to all your image tags in css like this

.img-thumbnail
{
  // your class property
}

img {
.img-thumbnail
}

Here is a similar question.

I want to apply an existing CSS style to all labels on a page. How?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM