javascript - 如何动态绑定(bind)到:src of img in vue js?

Question

以下是绑定(bind)img标签src属性的代码。 我能够绑定(bind)到属性。但是链接没有从 Assets 文件夹中获取真正的图标，而是显示 404 或未找到。

  <router-link
    v-for="nav in navigations"
    :to="'/' + nav"
  >
    <img
      class="icon"
      :src="'@/assets/icons/'+nav+'.svg'"
    />
    {{navigation}}
  </router-link>

真正的问题:如何使用字符串之间的变量动态绑定(bind)到属性，即 '@/assets/icons/' + nav + '.svg' ？像这样？

当我检查元素时，它显示相同的路径。即@/assets/icons/{{iconnamehere}}.svg但是真正的图标并没有出现。

但是如果我在没有任何绑定(bind)的情况下做这样的事情 <img src="@/assets/icons/logo.svg" />

然后图像显示...当我检查元素时，我看到一个替换路径，类似于这样的 `

Answer 1

希望你现在已经想通了，但事实证明你必须执行以下操作:

  methods: {
    getPic (name) {
      return require("@/assets/icons/"+name+".svg")
    }
  }

    <img
      class="icon"
      :src="getPic(nav)"
    />