Javascript vue动态图像绑定

原始代码在菜单中使用图像，如下所示：

<img
  :alt="$t('more')"
  class="mobile-plus-content visible-xs"
  src="../../../assets/img/plus79.png"
/>

我把它改成：

v-bind:src="mobileImage(id)"

在我的剧本中：

methods: {
  mobileImage(id) {
    console.log('id:', id);
    return logic ? plus : minus;
  },

它记录了id，但我不知道在这里返回什么。由于vue不再将png编译为静态资源，我应该将其放在哪里？

在脚本中，我做了：

const minus = require('@/assets/img/minus-1.png');
const plus = require('@/assets/img/plus79.png');

在mobileImage中：

return this.isMenuOpen(id)
  ? minus
  : plus;

---

仅供参考。您还可以在模板标记中使用require：

<template>
  <div>
    <img v-if="isMenuOpen(id)" :src="require('@/assets/img/minus-1.png')"/>
    <img v-else :src="require('@/assets/img/plus79.png')"/>
  </div>
</template>

<template>
  <div>
    <img v-if="isMenuOpen(id)" :src="require('@/assets/img/minus-1.png')"/>
    <img v-else :src="require('@/assets/img/plus79.png')"/>
  </div>
</template>