使用ng-file-upload显示缩略图

Question

我使用ng-file-upload来上传图像。我想要显示图像的缩略图。我使用的是angular 1.6。有人可以粘贴选定图像的缩略图的工作代码吗？

Answer 1

在ng-file-upload的documentation中，有一个自定义指令可用于显示图像的缩略图预览：

<div|span|...
 *ngf-thumbnail="file" // Generates a thumbnail version of the image file
 ngf-size="{width: 20, height: 20, quality: 0.9}"
    // the image will be resized to this size
    // if not specified will be resized to this element`s client width and height.
 ngf-as-background="boolean"
   // if true it will set the background image style instead of src attribute.
>

下面是一个缩略图标记的示例

<img class="your_class"
     ngf-thumbnail="path/to/file.jpg"
     ngf-size="{width:200, height:200, quality:1.0}"/>

Answer 2

从版本5.1.0开始使用ngf-background指令。

<div class="your-thumbnail-class" ng-show="!!yourModel" ngf-background="yourModel"></div>