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