综合编程

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

微信扫一扫,分享到朋友圈

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

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

问题

效果图


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>

复制代码

阅读原文...


微信扫一扫,分享到朋友圈

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

稀土掘金

Weird thing: Redux + Thunk + Axios + Typescript

上一篇

程序员过关斩将--你的业务是可变的吗

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

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

长按储存图像,分享给朋友