$ npm i -D file-loader

const imageList = [
 {id:1,info:'中国银行',uri:'./assets/1.jpg'},
 {id:2,info:'中国农业银行',uri:'./assets/2.jpg'},
 {id:3,info:'中国建设银行',uri:'./assets/3.jpg'}
]

imageList.map((img)=>{
  return (
  <div>
   {img.info}
   <img src={img.uri} />
  </div>
  )
})

{
test: /\.(jpg|png|svg|pdf)$/,
exclude: /font.*\.svg$/,
loader: 'file-loader"htmlcode">

const BANK_LIST = [
 {name: '中国银行', img: './assets/bank-logo-6.png', id: 1},
 {name: '中国建设银行', img: './assets/bank-logo-7.png', id: 2},
 {name: '兴业银行', img: './assets/bank-logo-8.png', id: 3}
]

BANK_LIST.map((bank)=>{
  return (
    <img src={require(bank.img+'')} />
  )
})


我的另外一种解决方案（由于项目中的eslint要求不支持动态引入文件）
使用webpack带的require.context('pathToDirectory')他可以循环的将一个目录下的所有文件引入




const BANK_LIST = {
 './bank-logo-6.png': {name: '中国银行', id: 1},
 './bank-logo-7.png': {name: '中国建设银行', id: 2},
 './bank-logo-8.png': {name: '兴业银行', id: 3}
 }

 const pathToImages = require.context('./assets');
 const originalBankList = pathToImages.keys().map((key) => {
 return Object.assign({}, BANK_LIST[key], {url: pathToImages(key)})
 });
 
//这时候originalBankList的每一项会变成
{name: '中国银行', id: 1，url: "/app/src/containers/WisePort/CheckoutCounterContai…/bank-logo-1.9f949c516315756e18c0cb7d572f4d2c.png"'}


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。