How to use refresh (F5) to update api background image?-CodePudding

I have an api (https://api.daihan.top/api/acg) for Random images. I use it for a website background image in css file.I want use F5 to fresh website to have a new background image.

But, in my code, use refresh it doesn't work.Use refresh it is still the old picture.Unless I close the entire webpage and reopen it, it can get a new background image.

And this is my css code:

.mask {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-image: url('https://api.daihan.top/api/acg');
}

I want to use refresh to have new background image, what should I do.

NEW UPDATE: I found that when in my computer Local environment, I can use refresh o update image. But when I deploy it in github pages, refresh doesn't work.

CodePudding user response：

It's probably caching the API. You could add a request parameter that adds a random number on every refresh, if you apply the style directly on the div, assuming you are using JavaScript. That way GitHub would think you are loading a different API every time and not cache.

Below is an example of how to do that in ReactJS.

style={{backgroundImage: `url('https://api.daihan.top/api/acg'?${Math.floor(Math.random() * 1000)})`}}

CodePudding user response：

Thanks @Authentic-Science solution, I add a random number on css link in html head file and did solve the problem. This is my new code:

<link rel="stylesheet" id="link" href="./source/main.css">
<script  type="text/javascript">
    document.getElementById("link").href="./source/main.css?random="   Math.random();
</script>

In Github pages, when I refresh, it can change the background image.

P.S. I didn't change my css file.