如何以角度显示 .tif 图像?

分享于2022年07月17日 angular css html typescript 问答
【问题标题】:如何以角度显示 .tif 图像?(How to display .tif image in angular?)
【发布时间】:2022-01-26 05:30:21
【问题描述】:

此代码适用于 .png 图像。

   getNextImage(imageObj:{imageName:string,cityImageId:number,imgNumber:number}):void{
    this.imgNumber= imageObj.imgNumber;
    this.imagePath=`assets/images/${imageObj.imageName}.png`;
    this.cityImageId=imageObj.cityImageId;
   }

但是当使用 .tif 格式的图像时,图像没有加载它只是显示空白

 getNextImage(imageObj:{imageName:string,cityImageId:number,imgNumber:number}):void{
        this.imgNumber= imageObj.imgNumber;
        this.imagePath=`assets/images/${imageObj.imageName}.tif`;
        this.cityImageId=imageObj.cityImageId;
       }

怎么做才能让tif格式的图片也正常工作?


【解决方案1】:

这一切都归结为对浏览器的支持,截至目前(21 年 12 月 27 日),只有 Safari 支持 TIFF 图像。

根据 MDN 的建议,最好避免使用此类文件扩展名,并选择社区广泛支持的图像(例如 png、jpg、jpeg 等),因此您应该将它们转换为 png|jpg|jpeg 以让球滚动起来。

更多详情: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types