你能否告诉我如何替换src
图像,同时列出反应?我有一个列表,其中有一个图像和它的标题。当图片不存在时,我想在src
标记中交换img
个网址。
如果服务器上存在图片,那么它就没问题了 - 如果没有 - 我想将src
网址替换为此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;
}
答案 0 :(得分:0)
您可以创建一个可以为您处理此逻辑的组件:
class SmartImage extends React.Component {
constructor() {
super();
this.state = { fallback: true };
}
componentDidMount() {
this.checkImage();
}
componentDidUpdate(prevProps) {
if (prevProps.image !== this.props.image) {
this.checkImage();
}
}
checkImage() {
let img = new Image(this.props.img);
img.onload = () => {
this.setState({ fallback: false });
};
img.onerror = () => {
this.setState({ fallback: true });
};
}
render() {
return (
<img src={this.state.fallback ? this.props.imgFallback : this.props.img} />
);
}
}
而不是直接呈现img
标记,您可以像这样呈现SmartImage组件:
<SmartImage img={url1} imgFallback={url2} />
它基本上检查图像是否在每次更改时成功加载,并在安装时,并相应地更改状态,然后相应地呈现。