javascript - 放大图片 bootstrap-vuejs

Question

选择图片保存后，再次打开页面时看不到图片。我不知道代码有什么问题。也许 CSS 中的某些内容应该改变。我不知道。有人可以告诉我我做错了什么吗？

谢谢你。

它应该是这样的：

但它就像：

这是我的代码：

<template>
  <b-container fluid>
    <h4>Templates</h4>
    </div>
    <b-form @submit="onSubmit" v-if="show">
      <b-row>
        <b-col sm="6">
          <b-row>
            <b-col sm="2">Image:</b-col>
            <b-col sm="6">
              <b-form-select @change="image_changed($event)" :options="images" :value=template.linked_image v-model="template.image_id"></b-form-select>
            </b-col>
                                            **//This should show the image after saving it.**
          </b-row>
        </b-col>
        <b-col sm="6">
          <b-img class="img" v-bind:src="fileName" thumbnail="true" alt="Thumbnail" width="600" height="300"/></b-col>
      </b-row>
      </br>
    </b-form>

  </b-container>
</template>
<script>
  // eslint-disable-next-line
  /* eslint-disable */
  export default {
    data() {
      return {
        fileName: '',
        images: [],
        linked_image: []
      }
    },
    created() {
      window.API.get(`template/` + this.$route.params.id)
        .then(response => {
          if (typeof response.data.connections === 'undefined') {
            response.data.connections = []
          }
          this.template = response.data
        })
        .catch(e => {
          this.errors.push(e)
        })
      window.API.get(`images`)
        .then(response => {
          console.log(response.data)
          for (var i = 0; i < response.data.images.length; i++) {
            this.images.push({
              'text': response.data.images[i].name,
              'value': response.data.images[i].id
            })
          }
        })
        .catch(e => {
          this.alerts.push(e)
        })
    },
    methods: {
      image_changed: function (id) {
        window.API.get(`image/` + id)
          .then(response => {
            console.log(response.data)
            var token = sessionStorage.getItem('token')
            this.fileName = 'https://192.185.12.101:8000/images/' + response.data.name + '?token=' + token;
          })
          .catch(e => {
            this.alerts.push(e)
          })
      }
    }
  }
</script>

Answer 1

解决了。

mounted: function() {
  return;
  this.image_changed(this.template.linked_image);
  return;
  var element = document.getElementsByClassName('load_image');
  var select = element[0];
  console.log(select.value);
  var ev = new Event('change');
  select.dispatchEvent(ev);
}