mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-09-29 00:10:50 +00:00
Fix missing cached images
This commit is contained in:
parent
c26b1de4fd
commit
0891244fa2
@ -53,8 +53,15 @@ const Avatar: Component<{
|
||||
|
||||
const imgError = (event: any) => {
|
||||
const image = event.target;
|
||||
|
||||
let src = props.user?.picture || props.src;
|
||||
|
||||
if (image.src === src) {
|
||||
src = defaultAvatar;
|
||||
}
|
||||
|
||||
image.onerror = "";
|
||||
image.src = defaultAvatar;
|
||||
image.src = src;
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -87,8 +94,9 @@ const Avatar: Component<{
|
||||
|
||||
const src = props.user?.picture || props.src;
|
||||
|
||||
|
||||
if (!src) {
|
||||
return defaultAvatar;
|
||||
return '';
|
||||
}
|
||||
|
||||
const url = media?.actions.getMediaUrl(src, size, true);
|
||||
@ -137,6 +145,7 @@ const Avatar: Component<{
|
||||
class={props.zoomable ? 'profile_image' : ''}
|
||||
media={imageMedia()}
|
||||
src={imageSrc()}
|
||||
altSrc={props.user?.picture || props.src}
|
||||
onError={imgError}
|
||||
/>
|
||||
</Show>
|
||||
|
@ -12,6 +12,7 @@ const NoteImage: Component<{
|
||||
media?: MediaVariant,
|
||||
width?: number,
|
||||
src?: string,
|
||||
altSrc?: string,
|
||||
isDev?: boolean,
|
||||
onError?: JSX.EventHandlerUnion<HTMLImageElement, Event>,
|
||||
onImageLoaded?: (url: string | undefined) => void,
|
||||
@ -25,10 +26,28 @@ const NoteImage: Component<{
|
||||
|
||||
const [isImageLoaded, setIsImageLoaded] = createSignal(false);
|
||||
|
||||
const src = () => props.media?.media_url || props.src;
|
||||
const [src, setSrc] = createSignal<string | undefined>();
|
||||
|
||||
// const src = () => props.media?.media_url || props.src;
|
||||
|
||||
const isCached = () => !props.isDev || props.media;
|
||||
|
||||
const onError = (event: any) => {
|
||||
const image = event.target;
|
||||
|
||||
if (image.src === props.altSrc || !props.altSrc) {
|
||||
// @ts-ignore
|
||||
props.onError(event);
|
||||
return true;
|
||||
}
|
||||
|
||||
setSrc(() => props.altSrc || '');
|
||||
|
||||
image.onerror = "";
|
||||
image.src = src();
|
||||
return true;
|
||||
};
|
||||
|
||||
const ratio = () => {
|
||||
const img = props.media;
|
||||
|
||||
@ -88,12 +107,17 @@ const NoteImage: Component<{
|
||||
setIsImageLoaded(true);
|
||||
}
|
||||
|
||||
setSrc(() => props.media?.media_url || props.src);
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
// Virtually load an image, to be able to get it's dimensions to zoom it properly
|
||||
imgVirtual = new Image();
|
||||
imgVirtual.src = src() || '';
|
||||
imgVirtual.onload = () => {
|
||||
setIsImageLoaded(true);
|
||||
}
|
||||
};
|
||||
imgVirtual.onerror = onError;
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
@ -118,7 +142,7 @@ const NoteImage: Component<{
|
||||
ref={imgActual}
|
||||
src={src()}
|
||||
class={klass()}
|
||||
onerror={props.onError}
|
||||
onerror={onError}
|
||||
width={willBeTooBig() ? undefined : `${props.width || 524}px`}
|
||||
/>
|
||||
</a>
|
||||
|
@ -33,6 +33,7 @@
|
||||
position: absolute;
|
||||
top: 148px;
|
||||
left: 15px;
|
||||
overflow: hidden;
|
||||
.avatar {
|
||||
border: solid 4px var(--background-site);
|
||||
border-radius: 50%;
|
||||
|
@ -170,6 +170,14 @@ const Profile: Component = () => {
|
||||
};
|
||||
|
||||
const imgError = (event: any) => {
|
||||
const image = event.target;
|
||||
|
||||
if (image.src !== profile?.userProfile?.banner) {
|
||||
image.onerror = "";
|
||||
image.src = profile?.userProfile?.banner;
|
||||
return true;
|
||||
}
|
||||
|
||||
const banner = document.getElementById('profile_banner');
|
||||
|
||||
if (banner) {
|
||||
@ -198,7 +206,7 @@ const Profile: Component = () => {
|
||||
const [isBannerCached, setisBannerCached] = createSignal(false);
|
||||
|
||||
const banner = () => {
|
||||
const src= profile?.userProfile?.banner;
|
||||
const src = profile?.userProfile?.banner;
|
||||
const url = media?.actions.getMediaUrl(src, 'm', true);
|
||||
|
||||
setisBannerCached(!!url);
|
||||
@ -510,7 +518,13 @@ const Profile: Component = () => {
|
||||
when={profile?.userProfile?.banner}
|
||||
fallback={<div class={styles.bannerPlaceholder}></div>}
|
||||
>
|
||||
<NoteImage class="profile_image" src={banner()} onError={imgError} plainBorder={true} />
|
||||
<NoteImage
|
||||
class="profile_image"
|
||||
src={banner()}
|
||||
altSrc={profile?.userProfile?.banner}
|
||||
onError={imgError}
|
||||
plainBorder={true}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user