Блог

Ниже приведен код для привязки к атрибуту src тега img. Я могу привязаться к атрибуту. Но ссылка не получает реальный значок из папки активов, вместо этого показывает 404 или не найдена.

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

Реальный вопрос: как я могу динамически привязываться к атрибуту с переменной между строками, т.Е. '@/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)"
    />