CODEWITHSUNDEEP
reactjsreact-reduxmaterial-ui
James Gee
James Gee

Reputation: 139

Images not displaying on material-ui card component

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

Upvotes: 2

Views: 711

Answers (2)

James Gee
James Gee

Reputation: 139

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"/>

Upvotes: 0

alisasani
alisasani

Reputation: 2968

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

Upvotes: 1

Related Questions