javascript - React，数组中的图像未显示在 <img src> 中

Question

对此感到相当困惑，尽管我觉得我的一切都是正确的，但似乎无法让它发挥作用。

我有一个数组，它引用我的 SRC 文件中的图像路径，然后在我的组件中我想使用 img src 标签显示该图像，但它只是给出我的形象 splinter 了。

在我的数组中，我引用了此处的图像

    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;

然后在我的组件中我将其设置如下

  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>
  );

通过调用namesList返回

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

我不明白为什么会出现错误，有人可以帮忙吗？谢谢!

Answer 1

不要忘记您的应用程序(由 React 生成的所有 DOM)包含在主 html 模板/页面的根节点中。

图像路径应根据该 html 文件的位置设置