vue图片地址不对显示默认图片并且大小与background：cover效果一样

我遇到的问题是这样的：

  

list要有图片，但是有的图片太长或者太宽，就需要固定长和宽，开始我是用下面的方法的。使用background-size: cover这个属性。但是如果  图片url存在并且错误的时候，代码会执行第一段。那么久出现一个问题就是背景图片解析不出来，显示空白框。

 

解决方法：

使用img标签，有人会说img没法做到background-size: cover这种效果。  

使用下图的object-fit:cover就会与background-size: cover的效果一致了

 

object-fit:fill

被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。

object-fit:contain

被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。

object-fit:cover

被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。

object-fit:none

被替换的内容尺寸不会被改变。

object-fit:scale-down

内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。

 

 

有兴趣的可以去看看效果,查看属性效果的地址。

 

 

 

左边分享一个公众号，写一些散文和影评等，右边的是博主自己的二维码，欢迎一起讨论。