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

前言

图片不显示这个问题在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>

复制代码

效果图

总结

只能说具体问题要具体分析，才能找到问题根源而且解决。