角度:如何检测图像方向后视图或何时从数据库获取图像?

Question

我正在尝试对居中和裁剪的图像进行拇指甲，所以我从数据库中得到。我找到了有关如何执行此操作的信息： https://aaronparecki.com/2016/08/13/4/css-thumbnails

该资源是为javascript编写的，我使用的是Angular 7。因此，我在检测图像是否为肖像时遇到了问题。

当我在加载页面之前获取所有照片时，我尝试添加类肖像，但问题是这是我从 DataBase 获得的路径，所以我构建了 Image 对象。代码是：

getPhotosUser(page) {
this._photoService.getPhotosUser(this.user.id, page).subscribe(
response => {
this.photos = response.objects
var addImageOrientationClass = function (img) {
var imgObject = new Image();
imgObject.src = img;
if(imgObject.naturalHeight > imgObject.naturalWidth){
img.classList.add("portrait")
}
}
this.photos.forEach(function (value: any) {
console.log("PHTOOOSOASAOSIA")
value.path = environment.api.replace('/api', '/') + value.path.replace('app/', '');
addImageOrientationClass(value.path)
})
}
)
}

我得到的错误是那个：

错误

类型错误： 无法读取未定义的属性"添加">

我也尝试将其或类似的东西放在 afterview 中，但我没有得到图像的值(如上面资源中的示例)。在简历中，我的代码是这样的：

ngAfterViewInit() {
var addImageOrientationClass = function (img) {
console.log(typeof(img))
if (img.naturalHeight > img.naturalWidth) {
img.classList.add("portrait")
}
}
var images = document.querySelectorAll("thumbnail img");
images.forEach(function (value: any){
if (value.complete){
addImageOrientationClass(value)
}else{
value.addEventListener("load", function(evt){
addImageOrientationClass(evt.target)
})
}
})
}

图像是空的，为此，如果有人可以帮助我或告诉我一个有用的库，我不会得到任何图像。

提前谢谢。

Answer 1

让我总结一下您的问题，因此您的要求是从数据库加载图像并将它们呈现为缩略图，居中和裁剪。

所以实现的基本思想是：

a) 缩略图：只需将图像标签包裹在锚标签内，这将呈现为缩略图

b)居中和裁剪：使用相同的css，即您引用的文档。

c) 动态加载图像：

1) Create placeholders for anchor->image tag  nested inside your photos array
2) map image source dynamically : <img [src]="urlVariable" />

PS：您引用的javascript代码仅用于方向，如果要动态创建Image元素并在Angular中渲染它们，则可以参考：

角度渲染器