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>

複製代碼

效果圖

總結

只能說具體問題要具體分析，才能找到問題根源而且解決。