nuxt-link as an image

Question

What do I have to do to use a nuxt-link as an image?

When I display an image in Vue, I usually do:

<img src="~assets/icons/filterLinkButton.svg">

but when I do the same with a nuxt-link, the path to the file does not get evaluated.

# this is not working

<nuxt-link 
  tag="img" 
  src="~assets/icons/filterLinkButton.svg" 
  to="/locations">
</nuxt-link>

What can I do to solve this?

EDIT:

It works though if I do:

<template>
    <nuxt-link 
      :src="image" 
      tag="img" 
      to="/locations">
    </nuxt-link>
</template>

<script>
import image from '~/assets/icons/filterLinkButton.svg'

export default {
  data() {
    return {
      image: image
    }
  }
}
</script>

Answer 1

You can do without a variable in data.

# this is working

<nuxt-link 
  tag="img" 
  :src="require('~/assets/icons/filterLinkButton.svg')" 
  to="/locations">
</nuxt-link>

Answer 2

According to this link, the tag prop is deprecated in vue-router 4 and should be replaced with v-slot. So arkadij_ok's answer would now look like this:

<nuxt-link
  v-slot="{navigate}"
  to="/locations"
>
  <img 
   :src="require('~/assets/icons/filterLinkButton.svg')"
   role="link"
   @click="navigate"
  />
</nuxt-link>