标签搜索

目 录CONTENT

文章目录

修改评论插件,解决图片无法加载时onerror异常问题

沙漠渔
2022-06-13 00:22:33 / 2 评论 / 1 点赞 / 491 阅读 / 947 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-06-13,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

迫不得己,把主题修改到最新主题了,当然也随之而来了一些问题,评论插件里的图片加载异常之后 onerror异常的话页面就会频繁请求,导致异常

问题原因

当前主题的评论插件在onerror标签中错误的使用了this,导致图片无法获取到,然鹅当错误的图片再次无法请求到时,即陷入了死循环,页面就差不多可以宣布崩溃了,不知道明不明白咋回事?

代码展示:

原代码如下:

created() {
    const renderer = {
      // eslint-disable-next-line no-unused-vars
      image(href, title) {
        return `<a data-fancybox target="_blank" rel="noopener noreferrer nofollow" href="${href}"><img src="${href}" class="lazyload comment_inline_img" onerror="this.src='${this.error_img}'" alt="图片"></a>`;
      },
      link(href, title, text) {
        return `<a href="${href}" title="${text}" target="_blank" rel="noopener noreferrer nofollow">${text}</a>`;
      },
    };
    marked.use({ renderer });
  },

解决方法:

将this指向调整一下,修改之后的代码如下:

created() {
    const error_img = this.error_img;
    const renderer = {
      // eslint-disable-next-line no-unused-vars
      image(href, title) {
        return `<a data-fancybox target="_blank" rel="noopener noreferrer nofollow" href="${href}"><img src="${href}" class="lazyload comment_inline_img" onerror="this.src='${error_img}'" alt="${title}"></a>`;
      },
      link(href, title, text) {
        return `<a href="${href}" title="${text}" target="_blank" rel="noopener noreferrer nofollow">${text}</a>`;
      },
    };
    marked.use({ renderer });
}

具体效果可以见:
修改当前主题,页脚增加页面加载耗时显示 - 沙漠渔溏 http://www.sammery.com/archives/80.html , 这个页面里有一个朋友发的评论区里的照片无法显示

当前我已经做了修改,可以正常显示了,不过该文件中还有几个类似的用法,暂时我不确定是否会出现相同问题,目前还暂时没条件测试,后面遇到了会再相应的修改。

1
广告 广告

评论区