diff --git a/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx b/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx index 5bde1400..84fb9407 100644 --- a/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx +++ b/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx @@ -3,8 +3,8 @@ import { useState } from "react" import { TbPhoto } from "react-icons/tb" interface ImageWithPlaceholderWhileLoadingProps { - src?: string - alt?: string + src: string + alt: string title?: string width?: number height?: number | "auto" diff --git a/commafeed-client/src/components/content/Content.tsx b/commafeed-client/src/components/content/Content.tsx index e031db74..1cb2c587 100644 --- a/commafeed-client/src/components/content/Content.tsx +++ b/commafeed-client/src/components/content/Content.tsx @@ -29,7 +29,9 @@ const transform: TransformCallback = node => { if (node.tagName === "IMG") { // show placeholders for loading img tags, this allows the entry to have its final height immediately const src = node.getAttribute("src") ?? undefined - const alt = node.getAttribute("alt") ?? undefined + if (!src) return undefined + + const alt = node.getAttribute("alt") ?? "image" const title = node.getAttribute("title") ?? undefined const nodeWidth = node.getAttribute("width") const nodeHeight = node.getAttribute("height") @@ -40,6 +42,7 @@ const transform: TransformCallback = node => { height, maxWidth: Constants.layout.entryMaxWidth, }) + return ( - {props.entry.enclosureUrl && ( + {props.entry.enclosureType && props.entry.enclosureUrl && (