如何在反应中替换图像源？

Question

你能告诉我如何在反应中替换图像源吗？ .我正在为我的img 标签设置一个src url。 如果服务器上不存在图像，我想将src url 替换为这个http://punemirror.indiatimes.com/photo/55813567.cms

如果服务器上存在图像，那么它很好。如果没有，那么我需要将源 URL 更改为“http://punemirror.indiatimes.com/photo/55813567.cms "

这是我的代码 https://codesandbox.io/s/KOrGKp3B8

我会这样尝试

imageExists(url, callback) {
        var img = new Image();
        img.onload = function () {
            callback(true);
        };
        img.onerror = function () {
            callback(false);
        };
        img.src = url;
    }


    renderList() {
        const lis = this.items.map((item, key) => {
            var src = "http://mumbaimirror.indiatimes.com/photo/" + item.id + ".cms";
            const alt = "http://punemirror.indiatimes.com/photo/55813567.cms";

            return (
                <li key={key}>
                    <a><img src={src}/><span>{item.hl}</span></a>
                </li>
            )
        })
        return (
            <ul>
                {lis}
            </ul>
        )
    }

    render() {
        return (
            <div className="list">
                {this.renderList()}
            </div>
        )
    }
}

Answer 1

检查您的图像是否存在，use this method 然后在您的组件类中：

componentWillMount() {
  var url = "http://mumbaimirror.indiatimes.com/photo/" + item.id + ".cms";
  const alt = "http://punemirror.indiatimes.com/photo/55813567.cms";
  var src = this.imageExists(url) ? url : alt;
  this.setState({ src });
}

// added from the mentioned post
function imageExists(image_url){
    var http = new XMLHttpRequest();
    http.open('HEAD', image_url, false);
    http.send();
    return http.status != 404;
}

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

Answer 2

您可以为此使用对象。

<object data={src} type="image/png">
  <img src="http://punemirror.indiatimes.com/photo/55813567.cms" />
</object>

Answer 3

在组件渲染时，您需要检查服务器端是否存在所有文件，并返回您在服务器上获得的所有文件ids 的数组。

当您获得现有文件的数组时，我们称之为allFileIds，您只需要这样做：

<li key={key}>
                <a><img src={allFileIds.indexOf(item.id) !== -1 ? src : alt}/><span>{item.hl}</span></a>
</li>

这将检查是否在服务器上找到所需的id（它检查item.id 值是否存在于您的服务器返回的文件ids 的数组中），如果不存在，则呈现alt属性而不是 src。我希望这很清楚！

Answer 4

首先将您的图像集合置于状态而不是字段中。

我假设您的图片集合中的每张图片都至少包含一个字段：url。您可以在 componentDidMount/componentWillReceiveProps 中检查您的图像（this.items）是否存在。请注意，您的 imageExists 方法是异步的 - 因此您不能在渲染期间使用它。根据检查，您可以将 img.src 设置为 undefined/null 或有效 URL。

然后在渲染中检查 image.url，如果它丢失 - 使用默认值。