是否可以将 :src 绑定到一个变量？

Question

我正在尝试将 src 属性绑定到由 Vuex 管理的变量，所以我这样做了：

<img
    class="navbar-brand-item"
    v-bind:src="{ 'assets/images/logo-light.png' : isNavbarLight, 'assets/images/logo.png' : !isNavbarLight }"
    alt="Logo"
/>

变量isNavbarLight取自Vuex商店：

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'Header',
  setup() {
    const store = useStore()
    const isNavbarLight = computed(() => store.state.isNavbarLight)
    return {
      isNavbarLight
    }
  }
})
</script>

它是一个 boolean 变量，它允许我根据页面颜色更改徽标的类型。这是 Vuex 存储实现：

import { Commit, createStore } from 'vuex';
    
export default createStore({
  state: {
    isNavbarLight: false 
  },
  mutations: {
    setNavbarLight: (state: {isNavbarLight: boolean}, value: boolean) => state.isNavbarLight = value
  },
  actions: {
    setNavbarLight: ({commit}: {commit: Commit}, value: boolean) => commit('setNavbarLight', value)
  },
  modules: {}
});

问题是我得到的最终结果是：

<img class="navbar-brand-item" src="[object Object]" alt="Logo">

这怎么可能？

Answer 1

当然可以，但现在您正试图将其绑定到具有两个布尔属性的对象！

<img
    class="navbar-brand-item"
    v-bind:src="isNavbarLight ? 'assets/images/logo-light.png' : 'assets/images/logo.png'"
    alt="Logo"
/>

这就是您如何使用带有三元运算符的语句在两个图像 URL 之间切换，或者您可以使用计算的属性或来自 Vuex 存储的值，只要它 returns 一个字符串，因为这是 src 属性所需要的。

Answer 2

如果我理解你是对的，你需要添加一个条件，这样你就可以通过使用这样的计算属性来实现它

....
computed: {
   logoSrc(){
      return this.isNavbarLight? 'assets/images/logo-light.png' : 'assets/images/logo.png';
   }
}
....

在 src 属性中，你可以这样写

<img :src="logoSrc">

是否可以将 :src 绑定到一个变量？

Is possible bind :src to a variable?

vue.js

vuex

vuejs3