Question

使用nuxt-link作为图像怎么办？

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

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

但是当我对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>

Answer 1

根据文档，如果您使用webpack，则可以在css文件中使用该别名（〜assets），但显然您需要在模板上使用〜/版本，在使用静态文件夹的情况下，我认为这更适合您，因为您在问题中使用的资产可以放置在静态文件夹中并摆脱别名

Answer 2

您可以在数据中不添加变量。

# this is working

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

Answer 3

我通过将图像放置在nuxt-link标签内来将其用作nuxt-link。 a screen shot of a nuxt-link with an img The html viewed with chrome dev tools

nuxt-link作为图像

3 个答案: