:root { --van-image-placeholder-text-color: var(--van-text-color-2); --van-image-placeholder-font-size: var(--van-font-size-md); --van-image-placeholder-background: var(--van-background); --van-image-loading-icon-size: 32px; --van-image-loading-icon-color: var(--van-gray-4); --van-image-error-icon-size: 32px; --van-image-error-icon-color: var(--van-gray-4); } .van-image { position: relative; display: inline-block; } .van-image--round { overflow: hidden; border-radius: var(--van-radius-max); } .van-image--round .van-image__img { border-radius: inherit; } .van-image--block { display: block; } .van-image__img, .van-image__error, .van-image__loading { display: block; width: 100%; height: 100%; } .van-image__error, .van-image__loading { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--van-image-placeholder-text-color); font-size: var(--van-image-placeholder-font-size); background: var(--van-image-placeholder-background); } .van-image__loading-icon { color: var(--van-image-loading-icon-color); font-size: var(--van-image-loading-icon-size); } .van-image__error-icon { color: var(--van-image-error-icon-color); font-size: var(--van-image-error-icon-size); }