fix: media not displaying with local backend (#324)

packages/core/src/components/Collection/Entries/EntryCard.tsx

@@ -3,19 +3,20 @@ import CardActionArea from '@mui/material/CardActionArea';
 import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import { getAsset as getAssetAction } from '@staticcms/core/actions/media';
 import { VIEW_STYLE_GRID, VIEW_STYLE_LIST } from '@staticcms/core/constants/collectionViews';
+import useMediaAsset from '@staticcms/core/lib/hooks/useMediaAsset';
 import { selectEntryCollectionTitle } from '@staticcms/core/lib/util/collection.util';
 import { selectIsLoadingAsset } from '@staticcms/core/reducers/medias';
 
-import type { ConnectedProps } from 'react-redux';
 import type { CollectionViewStyle } from '@staticcms/core/constants/collectionViews';
-import type { Field, Collection, Entry } from '@staticcms/core/interface';
+import type { Collection, Entry, Field } from '@staticcms/core/interface';
 import type { RootState } from '@staticcms/core/store';
+import type { ConnectedProps } from 'react-redux';
 
 const EntryCard = ({
   collection,
@@ -25,22 +26,10 @@ const EntryCard = ({
   imageField,
   collectionLabel,
   viewStyle = VIEW_STYLE_LIST,
-  getAsset,
 }: NestedCollectionProps) => {
   const summary = useMemo(() => selectEntryCollectionTitle(collection, entry), [collection, entry]);
 
-  const [imageUrl, setImageUrl] = useState<string>();
-  useEffect(() => {
-    if (!image) {
-      return;
-    }
-
-    const getImage = async () => {
-      setImageUrl((await getAsset(collection, entry, image, imageField)).toString());
-    };
-
-    getImage();
-  }, [collection, entry, getAsset, image, imageField]);
+  const imageUrl = useMediaAsset(image, collection, imageField, entry);
 
   return (
     <Card>
@@ -84,8 +73,9 @@ function mapStateToProps(state: RootState, ownProps: EntryCardOwnProps) {
   let image = inferedFields.imageField
     ? (entryData?.[inferedFields.imageField] as string | undefined)
     : undefined;
+
   if (image) {
-    image = encodeURI(image);
+    image = encodeURI(image.trim());
   }
 
   const isLoadingAsset = selectIsLoadingAsset(state.medias);

packages/core/src/components/MediaLibrary/MediaLibraryCard.tsx

@@ -1,8 +1,9 @@
 import { styled } from '@mui/material/styles';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 
 import { borders, colors, effects, lengths, shadows } from '@staticcms/core/components/UI/styles';
-import { transientOptions } from '@staticcms/core/lib';
+import useMediaAsset from '@staticcms/core/lib/hooks/useMediaAsset';
+import transientOptions from '@staticcms/core/lib/util/transientOptions';
 
 import type { MediaLibraryDisplayURL } from '@staticcms/core/reducers/mediaLibrary';
 
@@ -104,7 +105,7 @@ const MediaLibraryCard = ({
   isDraft,
   loadDisplayURL,
 }: MediaLibraryCardProps) => {
-  const url = useMemo(() => displayURL.url, [displayURL.url]);
+  const url = useMediaAsset(displayURL.url);
 
   useEffect(() => {
     if (!displayURL.url) {