vue img assets url

05.07.2019 10:58:21 Просмотров 14 Источник

Доброго времени суток.

Есть компонент на vue.js который в дате хранит массив объектов с описанием ссылок. Изображения хранятся так /src/assets/img/.В шаблоне черз v-for пробегаю через этот массив и в атрибут src тэга img пытаюсь вставить ссылку на картинку (ссылка вида "@/assets/img/pic.jpg") в результате vue ссылку не обрабатывает и втсавляет как есть (<img src="@/assets/img/service_delivery.jpg" alt="Доставка">). Не могу понять, что мне нужно сделать что бы в атрибуте ссылка на картинку сформировалась правильно.

<template>
  <div>
      <table class="services-table">
        <thead></thead>
        <tbody>
          <tr v-for="(serv, i) in services" v-bind:key="i">
            <td><img v-bind:src="serv.icon" v-bind:alt="serv.name"></td>
            <td>{{ serv.name }}</td>
          </tr>
        </tbody>
      </table>
  </div>
</template>
<script>
export default {
  name: 'ervices',
  data: function() {
    return {
      services: [
        { name: 'Такси', icon: "@/assets/img/service_taxi.jpg", },
        { name: 'Доставка', icon: "@/assets/img/service_delivery.jpg", }
      ]
    }
  }
}
</script>

Заранее спасибо за помощь!

У вопроса есть решение - Посмотреть?

Ответы - vue img assets url / vue img assets url

HarisDev

06.07.2019 01:18:59

Нужно использовать require или import, чтобы сообщить webpack, что этот путь должен рассматриваться как модуль:

<img :src="require(serv.icon)" alt="">

Подобный ишус на гите

Andy

08.07.2019 08:20:12

Всем спасибо за помощь.

Не сработал у меня вариант через require хоть убей пишет в консоль, что модуль не наеден. Видимо руки ну очень кривые. Нашёл на EN версии топик с решением где человек прям на 90% мою проблему описал, может кому поможет: Ссылка. Следуя этим инструкциям я, к сожалению, так же получил в консоль сообщение о не возможности найти модуль.

Мое решение проблемы оказалось таким. Нашёл в офф документации вариант через public Ссылка + использовал абсолютный путь до картинок - так работает.

Viorel

18.12.2019 08:12:03

если еще актуально как вариант

 { name: 'Такси', icon: require("@/assets/img/service_taxi.jpg"), },

вот такой вариант должен заработать, аналогичная ситуация была у меня

Закрыть X