fix: look for image on url head before rendering preview (#6127)

Co-authored-by: Diego Mello <[email protected]>

Author: OtavioStasiak

app/containers/message/Urls.tsx

@@ -128,14 +128,33 @@ const Url = ({ url }: { url: IUrl }) => {
 	const { colors, theme } = useTheme();
 	const { baseUrl, user } = useContext(MessageContext);
 	const API_Embed = useAppSelector(state => state.settings.API_Embed);
+	const [imageUrl, setImageUrl] = useState('');
+
+	useEffect(() => {
+		const verifyUrlIsImage = async () => {
+			try {
+				const imageUrl = getImageUrl();
+				if (!imageUrl) return;
+
+				const response = await fetch(imageUrl, { method: 'HEAD' });
+				const contentType = response.headers.get('content-type');
+				if (contentType?.startsWith?.('image/')) {
+					setImageUrl(imageUrl);
+				}
+			} catch {
+				// do nothing
+			}
+		};
+		verifyUrlIsImage();
+	}, [url.image, url.url]);
+
 	const getImageUrl = () => {
-		const imageUrl = url.image || url.url;
+		const _imageUrl = url.image || url.url;
 
-		if (!imageUrl) return null;
-		if (imageUrl.includes('http')) return imageUrl;
-		return `${baseUrl}/${imageUrl}?rc_uid=${user.id}&rc_token=${user.token}`;
+		if (!_imageUrl) return null;
+		if (_imageUrl.includes('http')) return _imageUrl;
+		return `${baseUrl}/${_imageUrl}?rc_uid=${user.id}&rc_token=${user.token}`;
 	};
-	const image = getImageUrl();
 
 	const onPress = () => openLink(url.url, theme);
 
@@ -166,9 +185,9 @@ const Url = ({ url }: { url: IUrl }) => {
 			]}
 			background={Touchable.Ripple(colors.surfaceNeutral)}>
 			<>
-				{image ? (
+				{imageUrl ? (
 					<WidthAwareView>
-						<UrlImage image={image} hasContent={hasContent} />
+						<UrlImage image={imageUrl} hasContent={hasContent} />
 					</WidthAwareView>
 				) : null}
 				{hasContent ? <UrlContent title={url.title} description={url.description} /> : null}