Frontity React中Foogallery等插件添加的图片被渲染为SVG占位符如何解决

• Foogallery自定义图片属性未被Frontity识别：从你提供的代码片段可以看到，Foogallery插件的真实图片地址存放在自定义属性data-src-fg中，而Frontity默认的图片懒加载逻辑只会读取标准src、data-src属性，无法识别该自定义字段，因此不会替换SVG占位符的地址。
• 图片处理器规则冲突：图片元素同时存在frontity-lazy-image和skip-lazy两个冲突类名，说明Frontity的懒加载规则和Foogallery的跳过懒加载规则匹配优先级出现问题，导致Foogallery的原生逻辑未生效。
• Foogallery脚本未在SPA环境正常触发：Foogallery的原生脚本是为WordPress服务端渲染页面设计的，而Frontity是客户端渲染的单页应用，页面内容动态加载后Foogallery的初始化逻辑未被触发，无法完成data-src-fg到src的地址替换。

• 验证资源有效性：直接访问data-src-fg属性中的图片完整地址，确认图片本身可以正常加载，排除资源不存在、跨域、防盗链拦截等基础问题。
• 测试懒加载冲突：临时关闭Frontity全局懒加载配置，刷新页面查看Foogallery图片是否正常显示，若恢复正常则可确认是懒加载规则冲突导致的问题。
• 检查脚本执行状态：打开浏览器开发者工具控制台，查看是否有Foogallery脚本加载失败、执行报错的信息，排除脚本本身未正常运行的问题。

方案1：扩展Frontity图片处理器适配自定义属性 #

在Frontity主题的处理器配置中新增针对data-src-fg属性的识别逻辑，优先级高于默认图片处理器，示例代码：

const foogalleryImageProcessor = {
  test: ({ node }) => node.type === "element" && node.tag === "img" && !!node.props["data-src-fg"],
  process: ({ node }) => {
    // 将自定义属性的图片地址同步给Frontity懒加载逻辑识别
    node.props["data-src"] = node.props["data-src-fg"];
    node.props.src = node.props["data-src-fg"];
    return node;
  }
};

// 将上述处理器加入到你的项目处理器数组中即可生效

方案2：禁用Frontity对Foogallery图片的懒加载拦截 #

如果要保留Foogallery自带的懒加载逻辑，可在Frontity懒加载插件配置中添加排除规则：

// frontity.settings.js中@frontity/lazyload-images的配置项
{
  name: "@frontity/lazyload-images",
  state: {
    lazyloadImages: {
      exclude: {
        classes: ["fg-image"]
      }
    }
  }
}

方案3：手动触发Foogallery初始化 #

如果是Foogallery脚本未执行导致的问题，可在Frontity页面渲染完成的生命周期中手动调用Foogallery的刷新方法：

import { useEffect } from "react";

// 在页面组件中添加该副作用逻辑
useEffect(() => {
  if (window.FooGallery) {
    document.querySelectorAll(".foogallery").forEach(gallery => {
      const instance = window.FooGallery.get(gallery);
      if (instance) instance.refresh();
    });
  }
}, [当前页面的内容依赖项]);

内容的提问来源于stack exchange，提问作者Paul M