Vue 2.x折腾记 - (22) Vue 打包图片在safari不显示的问题

CRPER

发布于 2019-06-15 15:34:26

1.1K0

发布于 2019-06-15 15:34:26

文章被收录于专栏：CRPER折腾记

前言

图片不显示这个问题在safari上会出现，不管是PC还是手机端，而其他浏览器是可以正常预览

问题

效果图

safari(桌面、手机）不显示图片，其他浏览器都是正常的。

代码如下

<script>
import png_no_message from '@assets/layout/message/no_message.png';
export default {
  name: 'NoMessage',
  render() {
    return (
      <div class="no-message">
        <img class="no-message__img" src={png_no_message} />
        <div class="no-message__desrc">暂时没有任何消息啦~</div>
      </div>
    );
  }
};
</script>

<style lang="scss" scoped>
.no-message {
  height: 80vh;
  @include flex(column);
  &__img {
    display: block;
    width: 376px;
    height: 350px;
  }
  &__desrc {
    font-size: 32px;
    color: #302c48;
  }
}
</style>

复制代码

解决姿势

有问题先自我排错！

语法错误？
资源被拦截？
vue框架问题？
- 不支持 jsx 加载资源？
- 换成 template 写法？

一一排查下来，啥毛病都没，资源也没有被拦截(safari的资源管理器可以看到图片资源）。

google大法，群友，没有一个人能说出个所以然。

最终打开一些大厂的站点，看看人家有木有问题，对比一下，写法上有点差异！！

图片元素自身设置宽高百分百 100%
给元素包裹一层父，然后设置父的宽高即可解决

代码实现

<script>
import png_no_message from '@assets/layout/message/no_message.png';
export default {
  name: 'NoMessage',
  render() {
    return (
      <div class="no-message">
        <div class="no-message__img">
          <img src={png_no_message} />
        </div>
        <div class="no-message__desrc">暂时没有任何消息啦~</div>
      </div>
    );
  }
};
</script>

<style lang="scss" scoped>
.no-message {
  height: 80vh;
  @include flex(column);
  &__img {
    display: block;
    width: 376px;
    height: 350px;
  }
  &__desrc {
    font-size: 32px;
    color: #302c48;
  }
}
</style>

复制代码

在 App.vue 上再设置下,因为这里是主入口，不设置scope,那这样所有图片元素都默认继承宽高比了

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss">
@import url('./styles/vue_common_transition.scss');
@import url('./styles/global.scss');
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  color: #2c3e50;
  height: 100%;
}
img {
  height: 100%;
  width: 100%;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

复制代码