Tidak dapat secara dinamis meneruskan jalur src relatif untuk imgs di Vue.js + webpack

Masalah yang saya alami adalah menggunakan vue.js dengan webpack.

Saya memiliki daftar yang ingin saya isi secara dinamis di vue.js.

Saya menggunakan v-for untuk mengulangi setiap objek dan membuat item daftar.

Untuk mengikat tag img src ke titik data {{resource.img}} tampilannya seperti ini: <img v-bind:src="resource.img"> untuk memuat gambar secara dinamis.

Namun, ketika klien merender halaman, jalur src sudah benar, namun itu adalah jalur relatif sebenarnya (mis. "../assets/example.png" dll, bukan jalur yang dihasilkan webpack. Jadi, gambar tersebut membuat 404 karena tidak ada gambar di "../assets/example.png".

Atau, jika saya melakukan hardcode pada src, gambar akan dimuat, dan src adalah beberapa jalur yang dibuat webpack, menemukan gambar yang benar.

Bagaimana cara mengatur src secara dinamis dengan webpack dan vue.js?


webpack javascript vue.js
person imchingy    schedule 06.10.2016    source sumber

Jawaban (1)


arrow_upward
9
arrow_downward

Anda memerlukan require.context.

Misalnya:

<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 pada dasarnya akan memetakan jalur sumber ke jalur akhir di direktori build untuk gambar apa pun yang ditemukan di folder sumber. Beginilah cara metode imgUrl() mengembalikan jalur yang benar saat runtime.

person Primoz Rome    schedule 07.10.2016