是否可以将 :src 绑定到变量？答案

【问题标题】：Is possible bind :src to a variable?是否可以将 :src 绑定到变量？
【发布时间】：2021-10-06 02:00:17
【问题描述】：

我正在尝试将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 store 的实现：

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">

这怎么可能？

【问题讨论】：

标签： vue.js vuex vuejs3

【解决方案1】：

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

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

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

<img :src="logoSrc">

【讨论】：

【解决方案2】：

当然有可能，但现在你正试图将它绑定到一个具有两个布尔属性的对象！

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

这就是你可以使用带有三元运算符的语句在两个图像 URL 之间切换的方法，或者你可以使用 Vuex 存储中的计算属性或值，只要它返回一个字符串，因为这就是src 属性需要。

【讨论】：