javascript - 图像未在嵌套路由vue js中加载

Question

我为我的应用创建了一个自定义组件来选择产品的多个图像:

<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">&times;</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 本身添加的(我想)。此外，控制台也没有错误。

任何人都可以帮我找出导致此问题的原因及其可能的解决方案吗？

Answer 1

这个 URL 不是 Vue 添加的。

使用图像的绝对路径。

示例:

src: '/' + obj.thumb