vue.js - nuxt-link 作为图像

Question

我必须做什么才能使用 anuxt-link作为图像？

当我在 Vue 中显示图像时，我通常会这样做：

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

但是当我对 a 做同样的事情时nuxt-link，文件的路径不会被评估。

# this is not working

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

我能做些什么来解决这个问题？

编辑：

如果我这样做，它会起作用：

<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>

标签： vue.jsvue-routernuxt.js

Answer 1

您可以在数据中不使用变量。

# this is working

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