vue.js - 在 VueJs 中使用全路径绑定动态图像源

Question

这个问题在很多地方都得到了处理，但我找不到适合我需要的解决方案。

  <div class="side_bar_button">
      <img :src="require('@/assets/' + imgSrc)" > <!-- FIXME: 我想传递完整路径，而不是一部分 -->
  </div>
</模板>

<script lang="ts">
从'vue-property-decorator'导入{Vue}；

导出默认 Vue.extend({
    道具：[“imgSrc”]，
})
</脚本>

没问题，图像已从带有 imgSrc = "logo.png" 的资产中正确加载。

我的需要：

<template>
  <div class="side_bar_button">
      <img :src="require(imgSrc)" > <!-- FIXME: I want to pass full path, not a part -->
  </div>
</template>

<script lang="ts">
import {  Vue } from 'vue-property-decorator';

export default Vue.extend({
    props: ["imgSrc"],
})
</script>

使用 imgSrc = "@/assets/logo.png"，不起作用。（与 vue-cli 构建相关的已知问题）。

但我不想将我的组件道具限制为来自@/assets 的图像源。

你有办法让它工作吗？我很确定我可以在 webpack 级别做一些事情来告诉构建，我可能会在 @/asset 中使用带有路径的文件，而无需在组件中输入它。

谢谢

编辑：调用组件：工作案例，我使用“@/assets/”+ imgSrc

<template>
  <div class="left_nav_bar">
      <div class="column">
          <SideBarButton imgSrc="icon/icon_patient_plus.svg" />
      </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import SideBarButton from '@/components/SideBarButton.vue'

export default Vue.extend({
    components: {
        SideBarButton
    }
})
</script>

失败案例，我使用 imgSrc

<template>
  <div class="left_nav_bar">
      <div class="column">
          <SideBarButton imgSrc="@/assets/icon/icon_patient_plus.svg" />
      </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import SideBarButton from '@/components/SideBarButton.vue'

export default Vue.extend({
    components: {
        SideBarButton
    }
})
</script>

标签： vue.jsvue-cli