無法在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>