React, image from array not showing up in <img src>

Question

Fairly stumped on this and can't seem to get it to work even though I feel I have everything correct.

I have an array that references an image path in my SRC file and then in my component I want to display that image using an img srctag but it's just giving me a broken image.

In my array I reference the image here

    const actors = [
  {
    person: 'Luke Skywalker',
    trivia: 'wants to go to the Tashi Station',
    image: '../../../../static/jt-luke.jpg',
    id: 1
  },
  {
    person: 'Leia Organa',
    trivia: 'Likes Buns',
    image: '../../../../static/jt-leia.jpg',
    id: 2
  },
  {
    person: 'Han Solo',
    trivia: 'is scruffy',
    image: '../../../../static/jt-han.png',
    id: 3
  },
  {
    person: 'Chewbacca',
    trivia: 'laughs it up like a fuzzball',
    image: '/jt-chewie.jpg',
    id: 4
  }
];

export default actors;

And then in my component I have it setup as so

  const { actors } = this.props;
const namesList = actors.map(actors => {
  return (
    <Col style={{ width: '100%' }} sm={12} md={6} lg={3}>
      <UnorderedListed>
        <img src={actors.image} />
        <p>
          {actors.person}
        </p>
        <p>{actors.trivia}</p>
      </UnorderedListed>
    </Col>
  );

which is returned by calling namesList

  <UnorderedStyled>
    <Row>
      {namesList}
    </Row>
  </UnorderedStyled>

I don't understand why I'm getting the error, can anyone assist? Thank you!

I think that src should be a url http:// ... and not a file path or see this: stackoverflow.com/questions/34582405/… — P_95
– P_95, Commented Jul 15, 2017 at 16:04
not sure I'm following you 100% here, so I'd need to write out something like <img src="http://${actors.image}"? — sthig
– sthig, Commented Jul 15, 2017 at 16:13
and require didn't work correctly for me unless I'm doing it wrong — sthig
– sthig, Commented Jul 15, 2017 at 16:15

taha · Accepted Answer · 2017-07-15 16:11:21Z

1

Don't forget that your App (all the DOM generated by react) is contained within a root node in your main html template/page.

Paths to images should be set according to the location of that html file

answered Jul 15, 2017 at 16:11

taha

1,01710 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sthig Over a year ago

I thought I'd done that correctly, perhaps not. Still not understand completely as to what to do

sthig · Accepted Answer · 2017-07-15 16:40:03Z

1

I figured it out thanks to @P-95

in your array make sure to put

  {
person: 'Leia Organa',
trivia: 'Likes Buns',
image: require('../../../../static/jt-leia.jpg'),
id: 2

},

Not just

 {
    person: 'Leia Organa',
    trivia: 'Likes Buns',
    image: '../../../../static/jt-leia.jpg',
    id: 2
  },

answered Jul 15, 2017 at 16:40

sthig

4693 gold badges13 silver badges36 bronze badges

Collectives™ on Stack Overflow

React, image from array not showing up in <img src>

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related