javascript - VueJs DropZone - 如何调整预加载图像的大小以适合缩略图大小

Question

首先，我使用 Vue DropZone 来上传照片。我目前在 dropzone 中有一个预加载的图像。我设法通过引用 vueDropZone 组件并调用 manualAddFile(file, url) 方法来实现这一点。但是，我无法调整预加载图像的大小以适应大小为 160 x 160 像素的缩略图框。我尝试应用以下 CSS 类，但它不起作用

.dz-image img {
  width: 100%;
  height: 100%;
}

为了给出更清晰的画面，我将提供我的代码和一些我想要实现的截图。

    <template>
  <div>
    <vue-dropzone id="dropzone" ref="myVueDropzone" :options="dropOptions" :useCustomSlot="true">
      <div class="dropzone-custom-content">
        <i class="fas fa-cloud-upload-alt fa-3x"></i>
        <h4 class="dropzone-custom-title mb-0 mt-3">Drag & Drop</h4>
      </div>
    </vue-dropzone>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";

export default {
  components: {
    vueDropzone
  },
  data() {
    return {
      /* This is similar to configuration options in dropzone.js */
      dropOptions: {
        url: "https://httpbin.org/post",
        acceptedFiles: "image/*",
        addRemoveLinks: true,
        thumbnailWidth: 160,
        thumbnailHeight: 160
      }
    };
  },

  mounted() {
    var file = {
      // Specify the file size and type of file
      size: 160,
      type: "image/jpeg"
    };
    var url = require("../assets/child.jpeg");
    this.$refs.myVueDropzone.manuallyAddFile(file, url);
  }
};
</script>

<style>
</style>

这是预加载照片的大小

与用户上传的照片相比，这是预加载照片的大小。基本上，我希望预加载的照片与用户上传的照片相匹配，大小为 160 x 160 像素

标签： javascriptcssvue.jsvue-componentdropzone.js