我为我的应用创建了一个自定义组件来选择产品的多个图像:
<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>
我也在其他路线(主要路线)中使用此组件,例如:
{
path: "/product-category",
component: require("./components/product/Category.vue")
},
主要线路运行平稳。但我在嵌套路由中遇到了麻烦:
{
path: "/product/create",
component: require("./components/product/Create.vue"),
},
在上图中,图像的原始路径是src="img/thumb_dcb7d855594bb92d2fd83108e8a2620e.jpg",但在路径的突出显示部分是http://localhost:3000/product/img/thumb_dcb7d855594bb92d2fd83108e8a2620e.jpg
这是由 vue 本身添加的(我想)。此外,控制台也没有错误。
任何人都可以帮我找出导致此问题的原因及其可能的解决方案吗?
最佳答案
这个 URL 不是 Vue 添加的。
使用图像的绝对路径。
示例:
src: '/' + obj.thumb
关于javascript - 图像未在嵌套路由vue js中加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57251210/