Search code examples
javascriptreactjscomponents

what is wrong here, and where is the issue?

import React from 'react';

const card = ({name, email, id}) => {
    return(
        <div className='tc bg-light-green dib br3 ma2 grow bw2 shadow-5'>
           <img alt="robots" src = {'https://robohash.org/${id}&720 *200'} />
           <div>
                <h2>{name}</h2>
                <p>{email}</p>
            </div> 
        </div>
    );
}

export default card;

i expected differnt image to appear after the code but it was giving me the same image

Solution

  • It's because you are using normal quotation mark to cover the image url (' '), if you are trying to add a dynamic path you should use backticks instead of normal quotation mark, something like this:

    <img alt="robots" src = {`https://robohash.org/${id}&720 *200`} />