Can someone explain why my header image is flickering on refresh?
Unanswered
MaKTaiL posted this in #help-forum
![Avatar](https://cdn.discordapp.com/avatars/316329653088550923/325c5530f40bcc8fa4f6e9c450b4d09a.webp?size=256)
MaKTaiLOP
Issue only happens in production in Vercel. Locally it works just fine.
https://sidebar-showcase.vercel.app/
https://github.com/MaKTaiL/sidebar
https://sidebar-showcase.vercel.app/
https://github.com/MaKTaiL/sidebar
<Link href="/">
<Image
src={"/next.svg"}
alt="Next Logo"
width={0}
height={0}
className="h-auto w-24"
priority
/>
</Link>
3 Replies
![Avatar](https://cdn.discordapp.com/guilds/752553802359505017/users/258390283127881728/avatars/6d84d27ad734d86c3c3d7f004660bded.webp?size=256)
Rafael Almeida
it looks like the
for
.svg
file is not being cached, this is the response header:Cache-Control: public, max-age=0, must-revalidate
for
.svg
logo files it is usually better to inline the SVG to avoid it flashing when loading, it is important since this element is above the fold![Avatar](https://cdn.discordapp.com/avatars/316329653088550923/325c5530f40bcc8fa4f6e9c450b4d09a.webp?size=256)
MaKTaiLOP
How can I do that? Sorry, never used SVG files before. I just re-used the one that comes with create-next-app
![Avatar](https://cdn.discordapp.com/guilds/752553802359505017/users/258390283127881728/avatars/6d84d27ad734d86c3c3d7f004660bded.webp?size=256)
Rafael Almeida
you can use the SVG code directly in the JSX with small corrections, there are tools to do it automatically: https://svg2jsx.com/