app-catalog: Display image only when defined

Signed-off-by: Evangelos Skopelitis <[email protected]>

Author: skoeva

app-catalog/src/components/charts/Details.tsx

@@ -80,14 +80,16 @@ export default function ChartDetails() {
                 name: 'Name',
                 value: (
                   <Box display="flex" alignItems="center">
-                    <Box mr={1}>
-                      <img
-                        src={`https://artifacthub.io/image/${chart.logo_image_id}`}
-                        width="25"
-                        height="25"
-                        alt={chart.name}
-                      />
-                    </Box>
+                    {chart.logo_image_id && (
+                      <Box mr={1}>
+                        <img
+                          src={`https://artifacthub.io/image/${chart.logo_image_id}`}
+                          width="25"
+                          height="25"
+                          alt={chart.name}
+                        />
+                      </Box>
+                    )}
                     <Box>{chart.name}</Box>
                   </Box>
                 ),

app-catalog/src/components/charts/List.tsx

@@ -220,22 +220,24 @@ export function ChartsList({ fetchCharts = fetchChartsFromArtifact }) {
                     justifyContent="space-between"
                     marginTop="15px"
                   >
-                    <CardMedia
-                      image={`https://artifacthub.io/image/${chart.logo_image_id}`}
-                      alt={`${chart.name} logo`}
-                      sx={{
-                        width: '60px',
-                        height: '60px',
-                        margin: '1rem',
-                        alignSelf: 'flex-start',
-                        objectFit: 'contain',
-                      }}
-                      component="img"
-                    />
+                    {chart.logo_image_id && (
+                      <CardMedia
+                        image={`https://artifacthub.io/image/${chart.logo_image_id}`}
+                        alt={`${chart.name} logo`}
+                        sx={{
+                          width: '60px',
+                          height: '60px',
+                          margin: '1rem',
+                          alignSelf: 'flex-start',
+                          objectFit: 'contain',
+                        }}
+                        component="img"
+                      />
+                    )}
                     <Box
                       display="flex"
                       alignItems="center"
-                      justifyContent="space-around"
+                      marginLeft="auto"
                       marginRight="10px"
                     >
                       {(chart.cncf || chart.repository.cncf) && (