CODEWITHSUNDEEP
vue.js
katahik
katahik

Reputation: 477

How to change the slider image dynamically

Thanks for browsing!

I am creating a slider with vue-image-lightbox.

enter image description here

However, now that I have a static src listed in the sample and the image is a slider, I would like to change this src to a dynamic one and display the image accordingly.

So I wrote the code as shown below, but the img src is set to undefind and the image is not displayed.

enter image description here

I thought I stored /uploads/1 here, but it is undefind.

So I'm hoping you can tell me how to store /uploads/1 in src and thumb.

I would like to ask for your wisdom.


<template>
  <div>
      <figure class="mr-3">
        <a class="img-box" @click.prevent.stop="show(0)">
          <img
              :src="post.main_image_url"
              :alt="post.main_image_url"
          >
        </a>
      </figure>
    <ImageLightBox :media="media" ref="lightbox" :show-light-box="false" :show-caption="true"></ImageLightBox>
  </div>
</template>

<script>
import ImageLightBox from 'vue-image-lightbox';

require("vue-image-lightbox/dist/vue-image-lightbox.min.css");

export default {
  name: 'lightbox',
  components: {
    ImageLightBox,
  },

  data() {
    return {
      post: {},
      post_main_image_url: '',
      media: [
        {
          // src: "/uploads/1" will work.
          thumb: this.post_main_image_url,
          src: this.post_main_image_url,
          title: '朝日が昇る摩周湖（北海道川上郡弟子屈町）',
        },
      ],
    }
  },

  methods: {
    show: function(index){
      this.$refs.lightbox.showImage(index)
    },
    // data acquisition process
    getData() {
      this.$loading.load(
          this.$auth.api.get(
              'posts/' + this.post_id, {
                params: {}
              }
          ).then(res => {
            this.post = res.data.post;

            let mainImageUrl = res.data.post.main_image_url;
            console.log(mainImageUrl)
              // =>/uploads/1
            let stringMainImageUrl = String(mainImageUrl)
            console.log(stringMainImageUrl)
              // =>/uploads/1
            this.post_main_image_url = stringMainImageUrl
            console.log(String(this.post_main_image_url))
              // =>/uploads/1
          }).catch(err => {
            this.$errorHandlers.initial(err);
          })
      )
    }

  }
  created() {
    this.getData();
  },
}
</script>

Upvotes: 1

Views: 517

Answers (1)

PawFV
PawFV

Reputation: 424

Hey just looked at your code, here are a couple of things:

 // I couldn't find `show` method, is it declared?
 <a class="img-box" @click.prevent.stop="show(0)"> 

<!-- You are initializing 'post' as empty string and I don't see a mounted hook
 for initializing this property 'main_image_url'  --> 
<img :src="post.main_image_url" :alt="post.main_image_url" />

  data() {
    return {
      post: {},
      post_main_image_url: '', 
      media: [
        {
/* When the component is mounted both properties will get initialized with an empty string.
You might need to initialize properties within the "mounted" hook. */
          thumb: this.post_main_image_url, 
          src: this.post_main_image_url,

// I don't see this method being called anywhere in the code
getData() {
      this.$loading.load(
        this.$auth.api
          .get('posts/' + this.post_id, {
            params: {}
          })

Upvotes: 1

Related Questions