从整个 HTML 动态添加 class 到 img 标签

Question

我有一个丰富的编辑器，可以添加文本和图像，使图像具有响应性

class="img-thumbnail"

在所有图像标签中都需要，所以使用Html敏捷包从整个Html中提取图像标签，但如何在每个图像标签上添加class。

例子

提取图像标签后来自 html 的输入

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

预计

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

代码

 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.
        }
      }

Answer 1

您可以像这样

为 css 中的所有图片标签添加属性

.img-thumbnail
{
  // your class property
}

img {
.img-thumbnail
}

这是一个类似的问题。

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

Answer 2

我猜问题出在你需要在显示之前保存HTML。否则 HTML Agility Pack 有时会忽略更改的属性。

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();
    }
 }

从整个 HTML 动态添加 class 到 img 标签

Dynamically add class to img tag from entire HTML

c#

asp.net

html-agility-pack