从道具反应js加载图像

Question

不知道为什么会这样：

import React from 'react';
import './imageDisplay.css';

// /src/content/GandJBoat.jpg'


const ImageDisplay = (props) => 
    (
    <div className='imageContainer'>
        {/* <img src={require(`${props.imageSource}`)} alt="" /> */}
        <img src={require('../../content/GandJBoat.jpg')} alt=''/>
    </div>
);

export default ImageDisplay;

这不会：

import React from 'react';
import './imageDisplay.css';

// /src/content/GandJBoat.jpg'


const ImageDisplay = (props) => 
    (
    <div className='imageContainer'>
        <img src={require(`${props.imageSource}`)} alt="" />
        {/* <img src={require('../../content/GandJBoat.jpg')} alt=''/> */}
    </div>
);

export default ImageDisplay;

当我运行第二个时出现错误

我不知道为什么两者会不同？我现在已经尝试了很多不同的方法，但我不确定为什么会这样。我想随机显示图片，顶层函数传递一个随机图片url给组件。

Answer 1

Require 是一个 CommonJs 函数，它的路径系统不能用作 URL 端点。正如我所见，您正在使用 url-loader。

按照这个例子：

import React from 'react';
import path from 'path';
import './imageDisplay.css';

// /src/content/GandJBoat.jpg'


const ImageDisplay = (props) => 
    (
    <div className='imageContainer'>
        <img src={require(`${path.join(__dirname, props.imageSource)}`)} alt="" />
        {/* <img src={require('../../content/GandJBoat.jpg')} alt=''/> */}
    </div>
);

export default ImageDisplay;

我强烈建议使用 EcmaScript 模块而不是 CommonJs 模块。

Answer 2

图像需要能够进行静态分析，以便打包程序能够解析它们并将它们自动打包到应用程序中。因此，使用 require 语法的动态字符串是不可能的。

require() 故意不支持动态生成的图像名称，因为随着时间的推移，它很难管理资产。

这里有一个示例或替代方法，您可以实现您想要的。

image.js

const images = {
  logos: {
    kl: require('./logos/company_logo.png'),
    a1: require('./logos/car_logo.png'),
    kc: require('./logos/sma_logo.png'),
    nv: require('./logos/investment_logo.png'),
    other: require('./logos/other_logo.png'),
  }
};

export default images;

在你的组件文件中，你可以导入这个 image.js

import Images from './assets/images';

然后创建一个函数来动态选择图像

imageSelect = imageselected => {
  if (imageselected === null) {
    return Images.logos.other;
  }

  const imageArray = {
    'KL': Images.logos.kl,
    'A1': Images.logos.a1,
    'KC': Images.logos.kc,
    'NV': Images.logos.nv,
    'Other': Images.logos.other,
  };

  return imageArray[imageselected];
};

然后在我的组件渲染函数中，我调用这个新的 imageSelect 函数来根据 this.state.imageSelected 中的值动态分配所需的图像：

render() {
  <img src={this.imageSelect(this.state.imageSelected)} />
}

传递给 imageSelect 函数的值可以是您喜欢的任何动态字符串或数字，因此，您可以在函数 imageSelect 中构建自己的逻辑。 >