Postingan lainnya

vue dynamic data binding image

saya disini pakai vue component dann masih bingung gimana sih caranya menampilkan data image yang ada pada directory

 public/upload/product

saya memakai framework php laravel. kalo tidak memakai vue component kan tinggal menambahkan

 {{assets('upload/products/')}}

nah gimana caranya apabila binding nya itu di vue component.

CODE :

  <tr v-for="product in filteredProduct">

            <td style="width:20px;">{{product.id}}</td>
          <td class="table-img-product"> <img :src="getImgUrl(product.image)" class="img-fluid" alt="IMG"> </td>

VUE :

   methods:{
    getImgUrl(img) {
      return 'public/upload/products'+img;
   },

laravel vue

@farisdewantoro

119 Kontribusi 16 Poin

Diperbarui 5 tahun yang lalu

6 Jawaban:

Coba sebagai berikut: <pre> methods: { getImgUrl(img) { return require(public/upload/products/${img}); } } </pre>

@Biobii

74 Kontribusi 34 Poin

Dipost 5 tahun yang lalu

error gannn <pre> Can't resolve 'public/upload/products' in 'D:\WEBSITE\PROJECT_KERJAAN\hammerstoutAdmin-v2\resources\as sets\js\components\products </pre>

@farisdewantoro

119 Kontribusi 16 Poin

Dipost 5 tahun yang lalu

Coba gausah lempar ke methods, jadi cuman

:src="'public/upload/products/'+product.image"

@apem

72 Kontribusi 27 Poin

Dipost 5 tahun yang lalu

kalo kayak gitu sih udah bisa gan cuman masalahnya ga ada kayak base domainnya gitu ya? kayak di img:srcnya itu cuman /public/upload/products aja ga ada kayak www.sekolahkoding.com/upload/products/img.jpg

@farisdewantoro

119 Kontribusi 16 Poin

Dipost 5 tahun yang lalu

@farisdewantoro Sudah dapat solusinya kah gan?

@ashandysp

49 Kontribusi 18 Poin

Dipost 5 tahun yang lalu

@farisdewantoro ambil base domainnya tambahin:

<pre> location.hostname </pre>

full codenya:

<pre> :src="location.hostname+'/directory_uploadnya/'+product.image" </pre>

@beckbella

68 Kontribusi 38 Poin

Dipost 5 tahun yang lalu