Should i load SVG files with @nuxt/image or use a simple img tag?

[oemer-aran]

Comparison

With img tag

using string:

<img src="/images/my-vector.svg"/>

or using import (only relevant for local images):

<img :src="importedSvg"/>
//...
import importedSvg from "@base/assets/images/my-vector.svg"

With nuxt-img

only string possible:

<nuxt-img src="/images/my-vector.svg"/>

My thoughts

• Using nuxt-img or nuxt-picture for every image keeps the code consistent and easy to understand
• Using simple img tag for .svg files would save an unnecessary request to the ipx endpoint
• Using simple img tag allows to use imported .svg

What is your opinion? Is there an official recommendation?

[robinscholz]

I’d suggest inlining them as Vue components with vite-svg-loader

import svgLoader from 'vite-svg-loader'

export default defineNuxtConfig({
  vite: {
    plugins: [
      svgLoader(),
    ],
  },
})