解决本地开发图片不显示问题

在本地开发进行调整图片的时候经常因为图片不显示不能快速的调整 提高开发效率
原因：接口返回的url没有域名造成的
So ：我们可以给他拼一个

直接上代码
methods里面直接封装方法

 //地址处理
   urlFilter(val) {
      var val = val + "";
      if (val.indexOf("http") != -1) {
        return val;
      } else {
        return this.baseUrl + val;
      }
    }

data里面写死一个域名

 data() {
    return {
      //基地址
      baseUrl: process.env.API_ROOT,
      noticeInfo: {},
      huatiTime: ""
    };
  },

调用

<img
            style="width:100%;height:100%"
            :src="urlFilter(noticeInfo.noticePicurl)"
            alt=""
          />

附加一个很好用的图片属性 不会造成图片的变形

object-fit控制图片显示

注意：
图片一定要设置宽高，否则设置object-fit无效。
将图片设置为和容器一样的宽高就可以了。
容器也不需要设置溢出隐藏，object-fit会自动隐藏超出图片的宽高部分。

em。。。。。叭错叭错
如果对你有一点点帮助的话点赞加收藏吧，互动必回噢~~~