console
<body ontouchstart=""><div>
<div class="demo-nav" style="">
<div class="demo-nav__title">Image</div><svg viewBox="0 0 1000 1000" class="demo-nav__back"><path fill="#969799" fill-rule="evenodd" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path></svg></div><section class="van-doc-demo-section demo-image"><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">基础用法</h2><div class="van-row"><div class="van-image" style="width: 100px; height: 100px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img"></div></div></div><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">填充模式</h2><div class="van-row"><div class="van-col van-col--8" style="padding-right: 13.3333px;"><div class="van-image" style="width: 100%; height: 27vw;">
<img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;"></div><div class="text">contain</div></div><div class="van-col van-col--8" style="padding-left: 6.66667px; padding-right: 6.66667px;"><div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;"></div><div class="text">cover</div></div><div class="van-col van-col--8" style="padding-left: 13.3333px; padding-right: 1.77636e-15px;"><div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;"></div><div class="text">fill</div></div><div class="van-col van-col--8" style="padding-right: 10px;"><div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;"></div><div class="text">none</div></div><div class="van-col van-col--8" style="padding-left: 10px;"><div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;"></div><div class="text">scale-down</div></div></div></div><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">圆形图片</h2><div class="van-row"><div class="van-col van-col--8" style="padding-right: 13.3333px;"><div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;"></div><div class="text">contain</div></div><div class="van-col van-col--8" style="padding-left: 6.66667px; padding-right: 6.66667px;"><div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;"></div><div class="text">cover</div></div><div class="van-col van-col--8" style="padding-left: 13.3333px; padding-right: 1.77636e-15px;"><div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;"></div><div class="text">fill</div></div><div class="van-col van-col--8" style="padding-right: 10px;"><div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;"></div><div class="text">none</div></div><div class="van-col van-col--8" style="padding-left: 10px;"><div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;"></div><div class="text">scale-down</div></div></div></div><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">加载中提示</h2><div class="van-row"><div class="van-col van-col--8" style="padding-right: 10px;"><div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img"><div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon"></i></div></div><div class="text">默认提示</div></div><div class="van-col van-col--8" style="padding-left: 10px;"><div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img"><div class="van-image__loading"><div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div></div></div><div class="text">自定义提示</div></div></div></div><div class="van-doc-demo-block"><h2 class="van-doc-demo-block__title">加载失败提示</h2><div class="van-row"><div class="van-col van-col--8" style="padding-right: 10px;"><div class="van-image" style="width: 100%; height: 27vw;"><div class="van-image__error"><i class="van-icon van-icon-photo-fail van-image__error-icon"></i></div></div><div class="text">默认提示</div></div><div class="van-col van-col--8" style="padding-left: 10px;"><div class="van-image" style="width: 100%; height: 27vw;"><div class="van-image__error">加载失败</div></div><div class="text">自定义提示</div></div></div></div></section></div><script src="https://b.yzcdn.cn/vant/async_chunks.a839cbb5.js"></script><script src="https://b.yzcdn.cn/vant/site-mobile.ea70a230.js"></script></body>