:src를 변수에 바인드할 수 있습니까?

:src를 변수에 바인드할 수 있습니까?

난 지금 이 모든 걸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">

어떻게 그것이 가능한가요?

물론 가능합니다만, 지금은 두 개의 부울 속성을 가진 객체에 바인드하려고 합니다!

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

이렇게 하면 3진 연산자와 함께 문을 사용하여 두 이미지 URL 사이를 전환할 수 있습니다. 또는 Vuex 저장소에서 문자열을 반환하는 한 계산된 속성이나 값을 사용할 수 있습니다. Vuex 저장소의 값은 Vernary 연산자와 함께 사용할 수 있습니다.srcAtribute에 필요합니다.

만약 내가 당신이 옳다고 이해한다면 당신은 조건을 추가해야 합니다. 이렇게 계산된 속성을 사용하여 그것을 달성할 수 있습니다.

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

및 내부src이렇게 적습니다.

<img :src="logoSrc">

언급URL : https://stackoverflow.com/questions/68592394/is-possible-bind-src-to-a-variable