LemmyNet
/
lemmy-ui
mirror of https://github.com/LemmyNet/lemmy-ui.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add fallback image for broken images (#2434) 

Co-authored-by: Dessalines <dessalines@users.noreply.github.com>
This commit is contained in:
SleeplessOne1917 2024-04-22 15:54:04 +00:00 committed by GitHub
parent f01701f5ec
commit c1b8946875
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 35 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/broken-image-fallback.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

7
src/assets/symbols.svg
View File

@ -170,8 +170,11 @@
<symbol id="icon-message-square" viewBox="0 0 24 24">
<path d="M22 15v-10c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-14c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v16c0 0.256 0.098 0.512 0.293 0.707 0.391 0.391 1.024 0.391 1.414 0l3.707-3.707h11.586c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121zM20 15c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-12c-0.276 0-0.526 0.112-0.707 0.293l-2.293 2.293v-13.586c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707z"/>
</symbol>
<symbol id="icon-image" viewBox="0 0 24 24">
<path d="M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM11 8.5c0-0.69-0.281-1.316-0.732-1.768s-1.078-0.732-1.768-0.732-1.316 0.281-1.768 0.732-0.732 1.078-0.732 1.768 0.281 1.316 0.732 1.768 1.078 0.732 1.768 0.732 1.316-0.281 1.768-0.732 0.732-1.078 0.732-1.768zM9 8.5c0 0.138-0.055 0.262-0.146 0.354s-0.216 0.146-0.354 0.146-0.262-0.055-0.354-0.146-0.146-0.216-0.146-0.354 0.055-0.262 0.146-0.354 0.216-0.146 0.354-0.146 0.262 0.055 0.354 0.146 0.146 0.216 0.146 0.354zM7.414 20l8.586-8.586 4 4v3.586c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293zM20 12.586l-3.293-3.293c-0.391-0.391-1.024-0.391-1.414 0l-10.644 10.644c-0.135-0.050-0.255-0.129-0.356-0.23-0.182-0.182-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707z"/>
<symbol id="icon-image" viewBox="0 0 256 256">
<path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z" />
</symbol>
<symbol id="icon-image-broken" viewBox="0 0 256 256">
<path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16h64a8,8,0,0,0,7.59-5.47l14.83-44.48L163,151.43a8.07,8.07,0,0,0,4.46-4.46l14.62-36.55,44.48-14.83A8,8,0,0,0,232,88V56A16,16,0,0,0,216,40ZM112.41,157.47,98.23,200H40V172l52-52,30.42,30.42L117,152.57A8,8,0,0,0,112.41,157.47ZM216,82.23,173.47,96.41a8,8,0,0,0-4.9,4.62l-14.72,36.82L138.58,144l-35.27-35.27a16,16,0,0,0-22.62,0L40,149.37V56H216Zm12.68,33a8,8,0,0,0-7.21-1.1l-23.8,7.94a8,8,0,0,0-4.9,4.61l-14.31,35.77-35.77,14.31a8,8,0,0,0-4.61,4.9l-7.94,23.8A8,8,0,0,0,137.73,216H216a16,16,0,0,0,16-16V121.73A8,8,0,0,0,228.68,115.24ZM216,200H148.83l3.25-9.75,35.51-14.2a8.07,8.07,0,0,0,4.46-4.46l14.2-35.51,9.75-3.25Z" />
</symbol>
<symbol id="icon-external-link" viewBox="0 0 24 24">
<path d="M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 69 KiB

36
src/shared/components/common/pictrs-image.tsx
View File

@ -1,9 +1,10 @@
import classNames from "classnames";
import { Component } from "inferno";
import { Component, linkEvent } from "inferno";
import { UserService } from "../../services";
import { setIsoData } from "@utils/app";
import { IsoData } from "../../interfaces";
import { getStaticDir } from "@utils/env";
const iconThumbnailSize = 96;
const thumbnailSize = 256;
@ -20,13 +21,35 @@ interface PictrsImageProps {
cardTop?: boolean;
}
export class PictrsImage extends Component<PictrsImageProps, any> {
interface PictrsImageState {
src: string;
}
function handleImgLoadError(i: PictrsImage) {
i.setState({
src: `${getStaticDir()}/assets/images/broken-image-fallback.png`,
});
}
export class PictrsImage extends Component<PictrsImageProps, PictrsImageState> {
private readonly isoData: IsoData = setIsoData(this.context);
state: PictrsImageState = {
src: this.props.src,
};
componentDidUpdate(prevProps: PictrsImageProps) {
if (prevProps.src !== this.props.src) {
this.setState({ src: this.props.src });
}
}
render() {
const { src, icon, iconOverlay, banner, thumbnail, nsfw, pushup, cardTop } =
const { icon, iconOverlay, banner, thumbnail, nsfw, pushup, cardTop } =
this.props;
const { src } = this.state;
const blurImage =
nsfw &&
(UserService.Instance.myUserInfo?.local_user_view.local_user.blur_nsfw ??
@ -58,6 +81,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
"avatar-pushup": pushup,
"card-img-top": cardTop,
})}
onError={linkEvent(this, handleImgLoadError)}
/>
</picture>
)
@ -70,14 +94,14 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
let url: URL | undefined;
try {
url = new URL(this.props.src);
url = new URL(this.state.src);
} catch {
return this.props.src;
return this.state.src;
}
// If there's no match, then it's not a pictrs image
if (!url.pathname.includes("/pictrs/image/")) {
return this.props.src;
return this.state.src;
}
// Keeps original search params. Could probably do `url.search = ""` here.