vue js의 img의 :src에 동적으로 바인드하는 방법

vue js의 img의 :src에 동적으로 바인드하는 방법

다음은 img 태그의 src 속성에 바인딩하기 위한 코드입니다.속성에 바인딩할 수 있습니다.그러나 링크가 자산 폴더에서 실제 아이콘을 가져오지 않고 대신 404 또는 찾을 수 없음으로 표시됩니다.

  <router-link
    v-for="nav in navigations"
    :to="'/' + nav"
  >
    <img
      class="icon"
      :src="'@/assets/icons/'+nav+'.svg'"
    />
    {{navigation}}
  </router-link>

실제 질문 : 문자열 사이의 변수를 사용하여 Atribute에 동적으로 바인드하려면 어떻게 해야 합니까? '@/assets/icons/'+nav+'.svg'이렇게요?

요소를 검사하면 동일한 경로가 나타납니다.즉,@/assets/icons/{{iconnamehere}}.svg그런데 진짜 아이콘이 안 보여요.

하지만 내가 구속없이 이런 일을 한다면 <img src="@/assets/icons/logo.svg" />

그러면 이미지가...요소를 검사하면 다음과 같은 대체 경로가 나타납니다.

지금쯤은 알아냈으면 좋겠는데, 알고 보니 다음 작업을 해야 합니다.

  methods: {
    getPic (name) {
      return require("@/assets/icons/"+name+".svg")
    }
  }

    <img
      class="icon"
      :src="getPic(nav)"
    />

언급URL : https://stackoverflow.com/questions/63720176/how-to-dynamically-bind-to-src-of-img-in-vue-js