Question

相当难以理解，即使我觉得我的一切都是正确的，也似乎无法让它发挥作用。

我有一个数组引用了我的SRC文件中的图像路径，然后在我的组件中我希望使用img src标记显示该图像，但它只是给了我一个损坏的图像。

在我的数组中，我引用了这里的图像

    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文件的位置设置图像路径

Answer 2

感谢@ P-95

，我想通了你的数组中的

一定要放

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

}，

不仅仅是

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

React，来自数组的图像未显示在<img src=""/>中

2 个答案: