I recently developed a custom component for my application that enables users to select multiple images for products:
<template>
<!-- Image modal -->
<div
class="modal fade"
id="gallery-multi"
tabindex="-1"
role="dialog"
aria-labelledby="galleryLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered modal-lg " role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="gallery">Gallery</h5>
<button type="button" class="close" @click="closeModal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<vue-select-image
:dataImages="dataImages"
:is-multiple="true"
@onselectmultipleimage="onSelectMultipleImage"
:h="'90'"
:w="'140'"
></vue-select-image>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" @click="closeModal()">Close</button>
</div>
</div>
</div>
</div>
</template>
<script>
import VueSelectImage from "vue-select-image";
import "vue-select-image/dist/vue-select-image.css";
export default {
name: "selectMultiImg",
data() {
return {
multiID:[],
dataImages: [
{
id: "",
src: "",
alt: ""
}
]
};
},
methods: {
closeModal() {
$("#gallery-multi").modal("hide");
},
onSelectMultipleImage: function(data) {
this.multiID = data.id;
this.$emit('multiImg', this.multiID);
}
},
components: { VueSelectImage },
mounted() {
axios.get("/api/gallery").then(response => {
this.dataImages = response.data.map((obj, index) => {
return {
id: obj.id,
src: obj.thumb,
alt: obj.name
};
});
});
}
};
</script>I have successfully integrated this component into the main routes of my app like:
{
path: "/product-category",
component: require("./components/product/Category.vue")
},
It works seamlessly in the main routes. However, I'm encountering issues when using it in nested routes:
{
path: "/product/create",
component: require("./components/product/Create.vue"),
},
The problem arises as images fail to load in the nested route. https://i.sstatic.net/h2F7P.png
https://i.sstatic.net/CE25k.png
In the screenshots above, the original image path is src="img/thumb_dcb7d855594bb92d2fd83108e8a2620e.jpg", however, the highlighted section of the path shows http://localhost:3000/product/img/thumb_dcb7d855594bb92d2fd83108e8a2620e.jpg
This addition to the image path seems to be done by Vue itself. Moreover, there are no errors displayed in the console.
If anyone could assist me in identifying the root cause of this issue and proposing a potential solution, it would be greatly appreciated.