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

Question

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.

Answer 1

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)})`}}

Answer 2

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.