Question

我正在尝试从我的img文件夹导入一些图像然后通过它们进行映射来显示它们，但是我无法通过映射显示它，如果我直接使用它就可以了。

import React, { Component } from 'react'
import { Link } from 'react-router'
 /*eslint-disable */
import { image1,image2 } from '../../../../assets/img/'
/*eslint-enable */

export default class Gallery extends Component {
 render() {
 const images = [
  { id: 1, img: {image1} },
  { id: 2, img: 'image2' },
]

const logos = (
  <section>
    <ul className={styles.products}>
    {images.map(img =>
      <li key={img.id} className={styles.productImg}>
        <img src={img.img} />
        <img src={image2} />
      </li>
    )}
    </ul>
  </section>
)

return (
  <div>
    {logos}
  </div>
)
}
}

Answer 1

MApping将起作用，但是您需要一次添加一个元素并更改为

const images = [
  { id: 1, img: image1 },
  { id: 2, img: image2 },
]

＆＃13;

class Gallery extends React.Component {
 render() {
 const images = [
  { id: 1, img: 'http://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed2.jpg' },
  { id: 2, img: 'http://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed2.jpg' },
]

const logos = (
  <section>
    <ul >
    {images.map(img =>
      <li key={img.id} >
        <img src={img.img} />
      </li>
    )}
    </ul>
  </section>
)

return (
  <div>
    {logos}
  </div>
)
}
}
ReactDOM.render(<Gallery/>, document.getElementById('app'))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

无法在React中映射导入的图像

1 个答案: