前言

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

问题

效果图

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

代码如下

复制代码

解决姿势

有问题先自我排错！

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

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

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

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

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

代码实现

复制代码

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

    复制代码

效果图

总结

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