Broken SVG Image Rendering with Nuxt Img in Client-Side Generated Builds

[Bader-Idris]

I am experiencing an issue with the Nuxt Img component when using an SVG file in my Nuxt 3 application. The SVG image renders correctly in SSR mode, but when I build the application using the nuxt generate command for client-side rendering, the image appears broken.

Here is the relevant code snippet that causes the issue:

<NuxtImg
  src="/imgs/thanks.svg"
  alt="thank you message icon"
  :placeholder="[50, 50, 75, 75]"
  format="webp"
  loading="lazy"
/>

I have tried removing the :placeholder and format properties, but the issue persists. The path to the SVG file is located in the ~/imgs/ directory. Interestingly, other image formats, such as JPG, work perfectly with the same setup:

<NuxtImg
  src="/imgs/meTwentyFour.jpg"
  alt="example image"
/>

You can find the project repository, where the error occurs, at the following link: Nuxt 3 Fullstack Portfolio.

Could you please assist me in resolving this issue? Thank you!