demo 原始链接:https://vux.li/demos/v2/#/component/x-img
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <div v-for=\"src in list\" style=\"background-color:yellow;text-align:center;\">\n <span style=\"font-size:20px;\">Loading</span>\n <x-img :src=\"src\" :webp-src=\"`${src}?type=webp`\" @on-success=\"success\" @on-error=\"error\" class=\"ximg-demo\" error-class=\"ximg-error\" :offset=\"-100\" container=\"#vux_view_box_body\"></x-img>\n </div>\n </div>\n</template>\n\n<script>\nimport { XImg } from 'vux'\nexport default {\n components: {\n XImg\n },\n methods: {\n success (src, ele) {\n console.log('success load', src)\n const span = ele.parentNode.querySelector('span')\n ele.parentNode.removeChild(span)\n },\n error (src, ele, msg) {\n console.log('error load', msg, src)\n const span = ele.parentNode.querySelector('span')\n span.innerText = 'load error'\n }\n },\n data () {\n return {\n list: [\n 'https://o5omsejde.qnssl.com/demo/test1.jpg',\n 'https://o5omsejde.qnssl.com/demo/test2.jpg',\n 'https://o5omsejde.qnssl.com/demo/test0.jpg',\n 'https://o5omsejde.qnssl.com/demo/test4.jpg',\n 'https://o5omsejde.qnssl.com/demo/test5.jpg',\n 'https://o5omsejde.qnssl.com/demo/test6.jpg',\n 'https://o5omsejde.qnssl.com/demo/test7.jpg',\n 'https://o5omsejde.qnssl.com/demo/test8.jpg'\n ]\n }\n }\n}\n</script>\n\n<style>\n.ximg-demo {\n width: 100%;\n height: auto;\n}\n.ximg-error {\n background-color: yellow;\n}\n.ximg-error:after {\n content: '加载失败';\n color: red;\n}\n</style>\n\n
\n