Question 246352 in Html Question posted in
Some basic documentation can be found here.

Html – react mapping over an array with image url

I am trying to map over an array with some image urls
However I am having trouble to display the images

this is my mapping function

<div className='Team-Members'>
    {OurTeamtext.map((team)=>{
    return (
        <div key={team.id} className='Team-Member'>
            <img src={team.picture}></img>

            <div className='Team-Member-description'>
            <p>{team.name}</p>
            <p>{team.position}</p>
          </div>
        </div>
    )
    })}
    </div>

and this is the array

export const OurTeamtext = [
    {
        id:1,
        name:'Sebastian',
        position:'Founder and CEO',
        picture:'../images/Sebastian.png'
    },
    {
        id:2,
        name:'Felix Merz',
        position:'Founder and CEO',
        picture:'sebastian'
    },
    {
        id:3,
        name:'Felix Merz',
        position:'Founder and CEO',
        picture:'sebastian'
    }

everything else then the image url can be displayed
Can somebody help me??

I tryed alredy different URL
It looks like it will not work
Can somebody help me please

Tags:

2

Answers


  1. 0

    In create-react-app relative paths for images don’t seem to work. Instead, you can import an image:

    import Sebastian from '../images/Sebastian.png'; // relative path to image

export const OurTeamtext = [
    {
        id:1,
        name:'Sebastian',
        position:'Founder and CEO',
        picture: Sebastian
    },
    {
        id:2,
        name:'Felix Merz',
        position:'Founder and CEO',
        picture: Sebastian
    },
    {
        id:3,
        name:'Felix Merz',
        position:'Founder and CEO',
        picture: Sebastian
    }
    ...

    This answer was taken from here. Your issue has already been addressed.

    Login or Signup to reply.
  2. 0

    I just replaced the images url with the hosted images urls and it worked out for me , You can check the codesandbox here

    export const OurTeamtext = [
  {
    id: 1,
    name: "Sebastian",
    position: "Founder and CEO",
    picture: "https://picsum.photos/id/237/200/300"
  },
  {
    id: 2,
    name: "Felix Merz",
    position: "Founder and CEO",
    picture: "https://picsum.photos/seed/picsum/200/300"
  },
  {
    id: 3,
    name: "Felix Merz",
    position: "Founder and CEO",
    picture: "https://picsum.photos/seed/picsum/200/300"
  }
];
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search