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

最新推荐文章于 2023-02-23 21:52:26 发布

crper

最新推荐文章于 2023-02-23 21:52:26 发布

阅读量1.3k

点赞数 2

分类专栏： Vue折腾记 Vue折腾记文章标签： vue vue jsx vue img

本文链接：https://blog.csdn.net/crper/article/details/92007710

版权

本文记录了在Safari浏览器中使用Vue 2.x时遇到图片无法显示的问题，详细描述了问题的现象、排除的错误可能性，并提供了解决方案——为图片元素设置宽高比。通过对比大厂站点的写法，找到了问题关键并成功解决。

摘要由CSDN通过智能技术生成

前言

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

<sty