Question

你能告诉我如何更换反应中的图像源吗？我正在为src标记设置img个网址。如果服务器上没有图片，我想将src网址替换为此http://punemirror.indiatimes.com/photo/55813567.cms

如果服务器上有图像，那就很好。如果不是，那么我需要将源网址更改为“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然后在您的组件类中：

.modal.modal-open {
    top: 50px !important;
    opacity: 1 !important;
}

Answer 2

您可以使用对象。

StreamSelectLoop::streamSelect

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中，如果它丢失了 - 使用默认值。

如何替换图像源？

4 个答案: