Vue的Image组件 - 根据设置Url自动显示加载成功，加载失败， 加载中的图片

2024年5月13日 247次阅读 来源: yanwosky4

npm 安装：

npm i –save y-image

属性:

loadUrl: 加载中显示的图片Url
errorUrl: 加载失败显示的图片Url
picUrl: 需要加载的图片Url

通过给y-imge设置不同的Url自动根据不用状态显示不同Url的图片

Example

html

  <div>
    <y-image :picUrl="picUrl"></y-image>
  </div>

JavaScript

<script> import YImage from 'y-image' export default { components: {YImage}, data () { return { picUrl: 'http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg' } } } </script>

npm地址: https://www.npmjs.com/package/y-image
github地址: https://github.com/yanwosky4/y-image
yanwosky4 yanwosky4@gmail.com
欢迎star，欢迎issue

参考链接：
https://blog.csdn.net/aj1031689/article/details/27353461

    原文作者：yanwosky4
    原文地址: https://blog.csdn.net/sinat_20623345/article/details/81981065
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞