React, image from array not showing up in

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: https://stackoverflow.com/questions/34582405/react-wont-load-local-images — P_95, Jul 15 '17 at 16:04
not sure I'm following you 100% here, so I'd need to write out something like ` — sthig, Jul 15 '17 at 16:13
and require didn't work correctly for me unless I'm doing it wrong — sthig, Jul 15 '17 at 16:15

score 1 · Answer 1 · answered Jul 15 '17 at 16:11

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 '17 at 16:11

taha

997
9
17

I thought I'd done that correctly, perhaps not. Still not understand completely as to what to do – sthig Jul 15 '17 at 16:16

score 1 · Answer 2 · answered Jul 15 '17 at 16:40

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
  },

React, image from array not showing up in

2 Answers2