前端图片展示优化！

无可奈何

昨天朋友问我一个关于图片展示失真的问题， 朋友是做IOS开发的对css样式略懂些，看他一脸无奈的样子，我觉得很有必要写点笔记记录了下，供大家参考交流。

灵机一动

 顺便在百度指数查了一番，感觉图片话题还是大有作为的，日均的搜索量都达到5w，想想自己平时用的各种图，也是很折腾，不知道大家有没有自己的图库，图库申请平台？有些平台上传的图片都会有水印的，如果文章发布多个平台的话，会稍微的有一些影响。。。

图库的上传和使用

转入正题

不知道大家有没有找图片找不到满意时的烦恼？但是过后却发现有些图片去使用会刚刚好；我找图片主要有三个网站平台，针对不同的应用场景。

Lorem Picsum 在线随机高清图片

使用也是特别的简单

# 随机图片 200 宽 300高
https://picsum.photos/200/300
# 指定ID的图片  id为 237
https://picsum.photos/id/237/200/300
# grayscale 获取灰度获取灰度图像
https://picsum.photos/200/300?grayscale
# blur 获取模糊的图像
https://picsum.photos/200/300/?blur=2

最后忍不住安利一下Pinbox 在线网站收藏插件，用起来特比的方便 

pixabay 高清图库

免费正版高清图片素材库，Pixabay拥有超过2.4百万张优质图片和视频素材，让你轻松应对各种设计场景。

iconfont 阿里图标库

iconfont国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。

项目跑起来

你猜对了，项目代码还是上传在码云上，直接复现场景，代码敲起来，在稍微普及下图片小知识，一般根据需求选择项目更合适的图片格式，jpg适合色彩较多的场景，gif用于较复杂的动画，png适用于半透明场景，webp是轻量级。

# 获取图片资源数据 图片尺寸不一致
initFetchImgSource() {
    fetch('http://picsum.photos/v2/list?limit=9')
        .then(res => res.json())
        .then(list => {
        console.log('我是图片资源数据 ****',list)
        this.imgList = list
    })
}

当显示区域固定长宽时，图片失真前效果是这样的 

处理后的效果 关键属性object-fit，Can I use 浏览器兼容情况

# 容器的设置 使用grid布局
.container{
    display: inline-grid;
    grid-template-columns: 200px 200px 200px ;
    grid-template-rows: 200px 200px 200px; 
    border: 1px solid #58546b; 
}
# 子容器样式设置
.item {
  font-size: 4em;
  text-align: center;
  border: 1px solid #58546b;
  img {
    width: 100%;
    height: 100%;
    # 保持图片原始的宽高比，防止失真
    object-fit: contain;
    opacity: 0.85;
    transition: all 3s;
    &:hover{
      object-fit: cover;
      opacity: 1;
    }
  }
}

当图片特别大的时候，容易加载慢，可以加loading动画

html模板

<div v-for="(item, inx) in imgList" :key="item.id" :class="[`item img-item-` + (inx + 1), item.loading ? 'loaded' : 'loading']">
    <img :src="item.download_url" alt="图片" @load="imgLoaded($event,item)" >
</div>

动画样式

# 定义动画
@keyframes loading {
  0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}
.item {
  text-align: center;
  border: 1px solid #58546b;
  position: relative;
  transition: .3s color, .3s border;
  &.loading::before {
    color: #403b3b;
    content: " ";
    height: 70px;
    width: 70px;
    font-size: 12px;
    position: absolute;
    top: calc(50% - 35px);
    left: calc(50% - 45px);
    border: 10px dotted currentcolor;
    border-radius: 50%;
    animation: 2s loading linear infinite;
  }
}

当图片路径由于某种原因突然失效时，可以加默认图片来提高体验效果

 <img :src="item.loadError ? 'https://storyset.com/images/404/8.svg' : (item.download_url + (inx > 5 ? '1' : ''))" alt="图片" @load="imgLoaded($event,item)" @error="imgLoadError($event,item)">

思考拓展

图片失真个人觉得根本原因是，图片尺寸的大小是固定的，只有等比放大或者缩小的时候，才能保持图片的清晰度，比如图片原始尺寸：300*400，但是容器是500*500，这样情况下是不可能完整的铺满容器的，要保证用户体验的前提下，可以协调UI设计师对图片重新设计或者改变容器的宽高来适配。当然肯定有更好的解决方法，有经验的小伙伴，可以帮忙指正完善下。