Javascript 在服务器故障期间（S3）将回退src添加到React上的映像

我有一个React+Rails应用程序，当前的S3服务器问题让我意识到，当无法从S3中提取数据时，我没有适当的回退机制。目前，我正在尝试将其用于本地存储的图像，并计划以同样的方式将其添加到其他图像标记中

我的

img

如下：

errorLink() {
  this.onError = null;
  this.src = '/img/icons/static/credentials.svg';
}

<img alt="Icon for credentials and experience" src="/img/icons/static/credentials123.svg" onError={this.errorLink.bind(this)()}/>

errorLink（）{
this.onError=null；
this.src='/img/icons/static/credentials.svg'；
}

---

图像中指向

credentials123.svg

的

src

是一个伪代码，我专门添加它来引起错误。但它并没有更新我的图像的src。我如何在react中实现这一点？我不希望下次在Amazon宕机期间向我的用户显示损坏的图像链接

这是众多解决方案中的一种（因为它实际上是基于您的内部项目结构）。您只需将图像url作为默认图像保存在某个位置。一旦您从S3获得了正确的图像url，那么您将用新的图像url替换状态中的默认图像url

const DEFAULT_IMAGE = '/img/icons/static/default.svg';

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

        this.state = {
            url: DEFAULT_IMAGE
        };
    }

    render() {
        return (
            {/* ... some UI here ... */}

            <img 
                alt="Icon for credentials and experience" 
                src={this.state.url}
            />
        );
    }

    // ....

    _someAsync = () => {
        // some async logic here

        // In here in 5 seconds state will be updated by replacing default url
        // with new url image link
        setTimeout(() => this.setState({ 
            loaded: true, 
            url: '/img/icons/static/credentials.svg'
        }), 5000);
    };
}

const DEFAULT_IMAGE='/img/icons/static/DEFAULT.svg'；
类MyComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
url：默认图片
};
}
render（）{
返回(
{/*…这里有一些UI…*/}
);
}
// ....
_someAsync=（）=>{
//这里有一些异步逻辑
//在这里，5秒钟后，将通过替换默认url更新状态
//使用新的url图像链接
setTimeout（（）=>this.setState（{
是的，
url:“/img/icons/static/credentials.svg”
}), 5000);
};
}

一个简单的方法是

确保在渲染中放置/设置值

this.state={image:'image to load.jpeg'}

this.image=image}onError={（）=>this.image.src='/alternate failover.jpg'

它为我工作。小，精确，可靠的代码

---

Ref:

但是如果我在一个页面上有很多图像，那么我不需要以单独的状态保存每个图像的url吗？如果图像url是静态属性（始终相同或始终相同，但在完成异步功能时仅更改为特定值）然后，您不需要将url保存为状态。如果图像url是动态属性（您可以从API检索它，或者根据某些交互进行更改）然后，您希望将url保存为状态，并在需要时将其更改为变量。当我从Amazon S3检索它时，它是一个动态属性。虽然您的解决方案非常适合我的问题，但在我加载项目目录并因此加载50多个图像的页面上使用此方法是否是一个好主意？然后保存这些url的数组并进行渲染你的图片。或者如果你真的喜欢冒险（这可能是非常糟糕的做法）你可以在你的UI中有一个

ref

到某个div元素，你可以生成一些内容，并在获得图像URL后将其注入到该div中。还有一个问题是在页面上保留50个图像的数据。我使用状态和UI，它使用大量数据来呈现，这很好。如果你担心图像太多，你可能会想研究无限滚动。有一个类似的问题，这里是我的解决方案：