CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-router
psudo
psudo

Reputation: 1558

Image not loading in nested route vue js

I've created a custom component for my app to select multiple images for product:

<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>

I'm using this component in other routes as well (main routes) like:

{
    path: "/product-category",
    component: require("./components/product/Category.vue")
},

and it runs smoothly in main routes. But I'm having trouble in nested route:

{
    path: "/product/create",
    component: require("./components/product/Create.vue"),
},

The problem is image doesn't load in nested route. enter image description here

enter image description here

In the above picture the original path of the image is src="img/thumb_dcb7d855594bb92d2fd83108e8a2620e.jpg" but in highlighted section of the path is http://localhost:3000/product/img/thumb_dcb7d855594bb92d2fd83108e8a2620e.jpg

Which is added by the vue itself (I suppose). Furthermore there is no error in console also.

Can anyone help me figure out what is causing this and its possible solution ?

Upvotes: 2

Views: 1586

Answers (1)

Дмитрий Алфёров
Дмитрий Алфёров

Reputation: 370

It not Vue added this URL.

Use absolute path to images.

Example:

src: '/' + obj.thumb

Upvotes: 5

Related Questions