Images not displaying on material-ui card component

user_8739067 0
Viewed 294

I am trying to get my photos to display on an iterated card component in Material-UI. I have checked all my Redux store and the URL's they relate to all bring up images when enter them on the address bar in Firefox so the links are working ok. If my file path in the backend is just backend/assets/article then the file number does this matter? I thought I had the asset folder set as public with Express but does there need to be an actual 'public' folder?

Is there anything obvious I am doing wrong trying to get this displayed? I have only got imported components working before and not managed URL's from my backend / Redux Store. Could this be the JSS of the card component?

<CardMedia
                id="Photos"
                className={classes.media}
                image={{uri: photos}}
                title="Dive Photos"/>
            <CardContent>

jss

media: {
        height: 70,
        paddingTop: '56.25%', // 16:9
    },

enter image description here

react-redux material-ui reactjs
2 Answers

According to the doc, the image prop in CardMedia component receives a string showing the address of the image. So you need to change the image prop as below:

<CardMedia
                id="Photos"
                className={classes.media}
                image={photos}
                title="Dive Photos"/>
            <CardContent>

codesandbox

user_117669470

The solution was a combination of the above and the fact that my JSS file was not properly importing with the cardMedia height. I added it to the main page and it rendered correctly.

<CardMedia
                id="Photos"
                className={classes.media}
                component="img"
                height="140"
                image={photos}
                title="Dive Photos"/>
user_87390670
Related