Gracefully handle a feed icon failing to load.

This commit is contained in:
supahgreg 2025-10-16 17:38:12 +00:00
parent a47a45d300
commit f382d2ac89
No known key found for this signature in database
10 changed files with 38 additions and 5 deletions

View File

@ -1,7 +1,7 @@
// Less configuration
const gulp = require('gulp');
const less = require('gulp-less');
const touch = require('gulp-touch-fd');
import gulp from 'gulp';
import less from 'gulp-less';
import touch from 'gulp-touch-fd';
function swallowError(error) {
console.log(error.toString())

View File

@ -58,6 +58,9 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/co
} else {
iconNode.src = 'images/blank_icon.gif';
}
iconNode.onerror = () => {
Feeds._handleIconError(iconNode);
};
}
}
@ -342,6 +345,9 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/co
if (icon) {
icon.src = src;
icon.onerror = () => {
Feeds._handleIconError(icon);
};
return true;
}

View File

@ -747,10 +747,16 @@ const Feeds = {
},
renderIcon: function(feed_id, exists) {
const icon_url = App.getInitParam("icons_url") + '?' + dojo.objectToQuery({op: 'feed_icon', id: feed_id});
const icon_url = App.getInitParam('icons_url') + '?' + dojo.objectToQuery({op: 'feed_icon', id: feed_id});
return feed_id && exists ?
`<img class="icon" src="${App.escapeHtml(icon_url)}">` :
`<img class='icon' src='${App.escapeHtml(icon_url)}' width='16' height='16' alt='feed icon' onerror='Feeds._handleIconError(this)'>` :
`<i class='icon-no-feed material-icons'>rss_feed</i>`;
},
_handleIconError: (img) => {
const icon = document.createElement('i');
icon.className = 'icon-no-feed material-icons';
icon.textContent = 'rss_feed';
img.replaceWith(icon);
}
};

View File

@ -880,6 +880,9 @@ body.ttrss_main img.icon {
line-height: 16px;
vertical-align: middle;
display: inline-block;
aspect-ratio: 1;
flex-shrink: 0;
object-fit: contain;
}
body.ttrss_main ul#filterDlg_Matches,
body.ttrss_main ul#filterDlg_Actions {

View File

@ -880,6 +880,9 @@ body.ttrss_main img.icon {
line-height: 16px;
vertical-align: middle;
display: inline-block;
aspect-ratio: 1;
flex-shrink: 0;
object-fit: contain;
}
body.ttrss_main ul#filterDlg_Matches,
body.ttrss_main ul#filterDlg_Actions {

View File

@ -880,6 +880,9 @@ body.ttrss_main img.icon {
line-height: 16px;
vertical-align: middle;
display: inline-block;
aspect-ratio: 1;
flex-shrink: 0;
object-fit: contain;
}
body.ttrss_main ul#filterDlg_Matches,
body.ttrss_main ul#filterDlg_Actions {

View File

@ -880,6 +880,9 @@ body.ttrss_main img.icon {
line-height: 16px;
vertical-align: middle;
display: inline-block;
aspect-ratio: 1;
flex-shrink: 0;
object-fit: contain;
}
body.ttrss_main ul#filterDlg_Matches,
body.ttrss_main ul#filterDlg_Actions {

View File

@ -1041,6 +1041,9 @@ body.ttrss_main {
line-height : 16px;
vertical-align : middle;
display : inline-block;
aspect-ratio: 1;
flex-shrink: 0;
object-fit: contain;
}
ul#filterDlg_Matches, ul#filterDlg_Actions {

View File

@ -881,6 +881,9 @@ body.ttrss_main img.icon {
line-height: 16px;
vertical-align: middle;
display: inline-block;
aspect-ratio: 1;
flex-shrink: 0;
object-fit: contain;
}
body.ttrss_main ul#filterDlg_Matches,
body.ttrss_main ul#filterDlg_Actions {

View File

@ -881,6 +881,9 @@ body.ttrss_main img.icon {
line-height: 16px;
vertical-align: middle;
display: inline-block;
aspect-ratio: 1;
flex-shrink: 0;
object-fit: contain;
}
body.ttrss_main ul#filterDlg_Matches,
body.ttrss_main ul#filterDlg_Actions {