Question

好奇的是你如何使用图片作出反应？我使用webpack所以我认为它会像这样

import Picture from '../assets/images/mypic.jpeg'

render(){
   <div>
      <Picture />
   </div>
}

但导入您想要使用的每一张图片都不是很繁琐吗？

Answer 1

您使用img标记就像在HTML中一样：

import myPicture from '../assets/images/mypic.jpeg'


render() {
  <div>
    <img src={myPicture} alt="My Picture" />
  </div>
}

Answer 2

从here窃取函数

我自己还没有测试过，但这听起来与您想要的类似。

const importAll = (r) => r.keys().map(r);

const images = importAll(require.context('../assets/images/', false, /\.(png|jpe?g|svg)$/));


render() {
  return (
    <div>
      {images.map((pic, i) =>
        <img src={pic} alt={`picture-${i}`} />
      }
    </div>
  )
}

使用图像进行反应的最佳做法

2 个答案: