I have a code where the user's avatar is fetched from the backend. Now, the avatar file name is the same every time, even if a user uploads a new one because the backend replaces the old avatar with the new one with the same name. Since this was causing caching issue on the browser, I used [IMAGE_URL]?random={new Date().getSeconds()} to update the state immediately when user changes it. But this causes the avatar to download multiple times when the page loads or when a React state updates. Is there a way so that the image is not cached and also I don't have to put some random query strings?
Avoid image caching in browser in React
2.4k views Asked by tuhindas At
1
There are 1 answers
Related Questions in REACTJS
- ussd reader in Recket Native module
- Teams tab application returns SSO error in mobile Outlook
- Github Pages Deployment deploys a blank page
- Is there any way to glow this bulb image like a real light bulb
- Optimize LCP ReactJs
- Page in React only renders elements after refreshing
- Unable to Post Form Data to MongoDB because of picturepath
- MERN Stack App - User Avatar Upload - 500 Error After Deployment on Render
- Hooks are not supported inside an async component error in nextjs project using useQuery
- How to change the Font Weight of a SelectValue component in React when a SelectItem is selected?
- On the server side, it returns undefined but on the client side, logs the values no problem
- Multilevel dropdown with checkboxes in Select component
- TypeScript Error only on big type only when assigned to a variable
- Deployment through app engine, cloud sql database, problem connecting with server code, doesn't connect
- Data is not filtering in props. Showing passdata.map is not a function
Related Questions in CACHING
- Using Puppeteer to scrape a public API only when the data changes
- Caching private wordpress rest endpoints
- Cloudflare not respecting Cache-Control
- Unexpected Recursive Call
- Cannot serialize (Spring Boot)
- Nginx only caches file endpoints
- The Selenium application properties folder holds two environment options. After running a test the environment setting changes to a previous setting
- Launch jobs in cache in a loop in bash script
- Multiple async request do not store anything to cache
- Dev tool for Next.js cache on the client?
- Creating a letter in the terminal by entering
- Laravel: check if cache has key with thag
- The retrieval time for the Apache Ignite cache is too long
- How to run gradle with caches files
- Docker Run cache mount does not cache apt-get dependencies
Related Questions in BROWSER
- (in promise) TypeError: NetworkError when attempting to fetch resource
- How could i add a bookmark and tabs function in PySide6?
- Difficulty Accessing HTTP URLs/IP Addresses Due to Browser Redirecting to HTTPS: Seeking Solutions
- Can be their an extension to save pages in as offline in the browser itself?
- Connecting puppeteer to an existing Brave Browser instance using
- How can I modify javascript native fetch function from an extension?
- Update your browser to use...in android webview application
- Why does throwing an error in any browser developer console not get caught by window.addEventListener('error')?
- The javascript and css files cached by chrome do not belong to the same version
- Unlike chrome Unable to create multiple instance of sidepanel while creating extension for edge browser
- Cannot import a class from a WebPacked javascript file
- How do I keep the same time input style in both firefox and chrome
- Use GUI application on Github Codespace
- get cpu / gpu capabilities from client in react / typescript?
- How to close a browser context after multiple test is written in same file
Related Questions in STATE
- NextJS 13 14, Store server state globally
- My state is undefined despite being setted
- Next.js carousel component loads instagram basic display api perfectly except in Safari browser
- How can I create a javascript animation that recognizes when it hits things, in other words a hit box?
- Flutter - When an element is deleted from the ListView, the state of the element under deletion is reset
- State Transfer from a model using Riverpod flutter
- React components don't re render when the state is changed
- Flutter | Persisting Navigator State Using Hydrated Bloc with the Bloc Design Pattern
- Wait set state finishes to call another function
- keyboard focus with GTK4 Rust does not work as expected and how to get state
- Bind state to context value in React JS
- I have a problem when I run on the web Bad state: databaseFactory not initialized databaseFactory
- How to manage state in a chrome extension in this scenario
- Should I use immutable or mutable state for a JSON tree editor in Flutter?
- React Component doesn't change states until file is resaved, then runs both at same time
Related Questions in NO-CACHE
- okhttp cache-control no-cache processing strategy
- ASP.NET Core MVC is forcing no-cache if there is a form tag on the razor page
- Cache-control set to 8 hours from Java end is getting overridden by no-cache from server
- Don't keep cache for basic authentication header not working
- How to optionally turn off Apollo caching
- Revalidation max-age=0, must-revalidate, no-cache no risk 504
- How to cache a file in CloudFlare, but not in browsers? I tried “Cache Everything”. I tried “Cloudflare-CDN-Cache-Control”
- Setting no-cache after a cache has occurred?
- Rail API - Disable cached response
- Output Caching using IIS (Unable to change to No Cache)
- Avoid image caching in browser in React
- Blazor WebAssembly caching on IIS
- Does no-cache allow a stale cached response to be returned?
- IIS Internet Information Server no-cache setting in web.config
- Change response cache header for a request
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
Popular Tags
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
you have to implement a hash mechanism on your backend to add a hash string to the image name not on the client side