react.js 请求本地图片资源

一、使用import引入

import testImg from './image/img1.jpg'
<img  src={testImg } />

二、使用require引入

注意：require('./image/img1.jpg') 这种方式只能够使用路径地址不能够使用变量。

<img  src={require('./image/img1.jpg')} />

三、加载全部图片路径

//引入image文件夹下所有.jpg图片资源

const requireContext = require.context("./image/",true, /^\.\/.*\.jpg$/);

//形成数组

const data = requireContext.keys().map(requireContext);

//循环遍历图片资源

{data.map(val => (

            <a
              key={val}
              href="http://www.alipay.com"
              style=            
               {{ display: 'inlineblock', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={val}
                alt={val}
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          ))}

四、循环变量拼接加载

来源：CSDN

作者：qq_41315539

链接：https://blog.csdn.net/qq_41315539/article/details/104227272