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

Question

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

Answer 1

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

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

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

show thumbnail image using ng-file-upload

angularjs

ng-file-upload