CODEWITHSUNDEEP
javascriptreactjs
Kiwimoisi
Kiwimoisi

Reputation: 4182

React image path coming as {}?

I am importing an image component into my card which looks like that :

<CardWrapper as="a" href="#">
    <CardImage src={props.data.imageUrl}/>
    <CardMeta>
        <CardLogo src={props.data.logoUrl} />
        <CardText>{props.data.text}</CardText>
    </CardMeta> 
</CardWrapper>

The image component looks like :

export const Image = props => {
  return (
    <div>
        {props.src}
        <ImageContainer alt="test" src="{props.src}" />
    </div>
  )
}

Why is it printing this way? The path is correct? but the src still shows the brackets and not the correct path?

<div>
 ./Assets/Img/tile.jpg
 <img alt="test" src="{props.src}" class="sc-bdVaJa bEXmsf">
</div>

Upvotes: 1

Views: 62

Answers (3)

Vishwanath
Vishwanath

Reputation: 164

try removing double quotes for {props.src}, think it will work

Upvotes: 0

mfe
mfe

Reputation: 1208

src={props.src} not src="{props.src}". Remove double quotes

Upvotes: 0

Thakur Karthik
Thakur Karthik

Reputation: 3498

It has to be in this way i guess

<ImageContainer alt="test" src={props.src} />

Upvotes: 3

Related Questions