vue封装image组件,处理图片获取失败的情况

前台向后台发起图片请求,如果图片在数据库中删除了或者拒绝访问,则默认的image无法显示图片,为了更友好的体验,我们可以给一张默认图片,这里使用的是uni-app框架






通过全局注册组件后,可以在多处使用

首页,传入子组件需要的prop属性(图片的url),子组建接收到后赋值给imageSrc, 如果image渲染图片失败,则触发imageErr事件,将图片地址替换成提示图片

注意:如果子组建中的props属性使用camelCase (驼峰命名法) ,在引用时需要kebab-case (短横线分隔命名) 命名,否者不能正确获取

https://cn.vuejs.org/v2/guide/components-props.html

你可能感兴趣的:(个人总结)