Не удается динамически передавать относительный путь src для imgs в Vue.js + webpack

Проблема, с которой я столкнулся, заключается в использовании vue.js с веб-пакетом.

У меня есть список, который я хочу динамически заполнять в vue.js.

Я использую v-for для перебора каждого объекта и создания элементов списка.

Чтобы привязать тег img src к точке данных {{resource.img}}, это выглядит так: <img v-bind:src="resource.img"> для динамической загрузки изображения.

Однако, когда клиент отображает страницу, путь src правильный, однако это фактический относительный путь (например, "../assets/example.png" и т. Д., А не путь вывода веб-пакета. Таким образом, изображение создает 404 потому что в "../assets/example.png" нет изображения.

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

Как я могу динамически установить src с помощью webpack и vue.js?


webpack javascript vue.js
person imchingy    schedule 06.10.2016    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Вам понадобится require.context.

Например:

<img width="30" height="30" :src="imgUrl(resource.img)">

var images = require.context('../../assets/img/', false, /\.jpg$/)

export default {
  methods: {
    imgUrl: function (path) {
      return images('./' + path)
    }
  }
}

Require.context по существу сопоставляет исходный путь с окончательным путем в каталоге сборки для любого изображения, которое он нашел в исходной папке. Вот так метод imgUrl () вернет правильный путь во время выполнения.

person Primoz Rome    schedule 07.10.2016