CODEWITHSUNDEEP
reactjs
Bill
Bill

Reputation: 5150

How to use a prop to form an image url

I want to use the prop as part of the file name as part of the src for an image but I'm clearly doing something wrong.

I am passing on the name as string, and then using the name to form the url for the image. I've tried using the back tick "`" but that doesn't work either.

import React from 'react';

type AppProps = {
    name: string
    description: string
  }

const PartnerIcon: React.FC<AppProps> = ({name, description}) => {
  return (
    <div className="partner-icon">
      <img src="../images/{name}.svg" className="span-row-2"></img>
      <b>{name}</b>
      <p>{description}</p>
    </div>
  );
}

export default PartnerIcon;

Upvotes: 2

Views: 118

Answers (3)

Nihal Saxena
Nihal Saxena

Reputation: 1006

You can use string interpolation like that :

<img src={`../images/${name}.svg`} className="span-row-2"></img>

Upvotes: 1

Freestyle09
Freestyle09

Reputation: 5508

Try this:

<img src={`../images/${name}.svg`} className="span-row-2"></img>

Upvotes: 2

Tien Duong
Tien Duong

Reputation: 2595

You can use string interpolation. 

<img src={`../images/${name}.svg`} className="span-row-2"></img>

Upvotes: 2

Related Questions