迫不得己,把主题修改到最新主题了,当然也随之而来了一些问题,评论插件里的图片加载异常之后 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 , 这个页面里有一个朋友发的评论区里的照片无法显示
当前我已经做了修改,可以正常显示了,不过该文件中还有几个类似的用法,暂时我不确定是否会出现相同问题,目前还暂时没条件测试,后面遇到了会再相应的修改。
评论区