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;
},
6 Jawaban:
Coba sebagai berikut:
<pre>
methods: {
getImgUrl(img) {
return require(public/upload/products/${img}
);
}
}
</pre>
error gannn <pre> Can't resolve 'public/upload/products' in 'D:\WEBSITE\PROJECT_KERJAAN\hammerstoutAdmin-v2\resources\as sets\js\components\products </pre>
Coba gausah lempar ke methods, jadi cuman
:src="'public/upload/products/'+product.image"
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 Sudah dapat solusinya kah gan?
@farisdewantoro ambil base domainnya tambahin:
<pre> location.hostname </pre>
full codenya:
<pre> :src="location.hostname+'/directory_uploadnya/'+product.image" </pre>