如何在JSON配置中为关联HTML的img标签添加inverted类属性

解决方案 #

你当前配置中根级的class: "inverted"是作用在Control分类的父容器上，不会自动传递到内部的img标签，按以下两种场景修改即可： #

场景1：可调整icon渲染逻辑

如果有权限修改生成img标签的前端渲染代码，按以下两步操作：

1. 先修改渲染img的代码，新增绑定iconClass的逻辑：

// 原逻辑（示例）
const imgTag = `<img src="${config.icon}" alt="">`
// 修改为
const imgTag = `<img src="${config.icon}" alt="" class="${config.iconClass || ''}">`

2. 修改JSON配置，新增iconClass字段，路径按你实际需要填写：

{
  "name": "Control",
  "icon": "/./images/icon/led.png",
  "iconClass": "inverted",
  "color": "#ed3467",
  "blocks": [
    {
      "xml": `<block type="controls_wait"><value name="time"><shadow type="math_number"><field name="NUM">1</field></shadow></value></block>`
    }
  ]
}

修改后生成的img标签就会自带class="inverted"属性。 #

场景2：无法修改渲染逻辑

如果不能调整前端代码，直接通过父容器的inverted类加CSS后代选择器即可实现完全一致的效果：

/* 直接把inverted类原本的样式写在这个选择器下 */
.inverted img {
  filter: invert(1);
}

内容的提问来源于stack exchange，提问作者Mohamed Abdelrehem