Reactでインポートしたイメージをマップできません

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

マッピングは、しかし、あなたが一度に一つの要素を追加し、

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

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

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