Question

我正在通过对象进行映射，并且希望动态添加图像源，但是如果没有图像，则id要加载默认图像。理想情况下，这需要尽可能少的计算能力，因为有很多图像会经常变化。

我已经有动态图像src设置，但是我没有循环来检查它是否存在。只是想知道最快的方法是什么。

...
render() {
    const images = require.context("../../../../../public/images", true);
...

return {
{this.props.items.map...

<img src={images(`./${item.item}`)} />

....)}

Answer 1

您可以创建一个自定义图像组件来处理此问题：

import React from 'react';

class Img extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      src: this.props.src,
      error: false,
    };

   this.onError = this.onError.bind(this);
  }

  onError = () => {
    if (!this.state.error) {
      this.setState({
        src: this.props.defaultSrc,
        error: true,
      });
    }
  }

  render() {
    const { src } = this.state;

    return (
      <img
        src={src}
        onError={this.onError}
      />
    );
  }
}

export default Img;

然后您可以这样设置：

<Img src='if-this-image-not-exists-doesnt-matter.png' defaultSrc='https://picsum.photos/id/237/200/300' />

Answer 2

如果您是说item.item可能为空或不存在，则可以将其与默认值item.item || default.png进行或运算。

如果您的意思是存在item.item但可能无法加载，则可以在图像上设置onError处理程序，并在错误时将圆弧设置为默认圆弧。

执行onError方法的另一种方法是首先将所有<img>元素的src设置为默认图像，并实例化一个Image对象以加载item.item。如果成功，则相应地更新<img>。如果失败，那么您已经有了后备图片。

以下是一个小提琴，显示了如何首先加载默认图像，加载真实图像以及在加载失败时显示错误图像：

https://jsfiddle.net/rayhatfield/ouqyav7p/22/

Answer 3

感谢Ray Hatfield，以下解决了该问题。


function getImage(item) {
    try {
        return images(`./${item}.svg`);
    }
    catch (e) {
        return images('./default.png');
    }
}

然后：

<img src={getImage(item.item)} />

如何动态设置图像或使用默认值

3 个答案: