每日一篇(9)--vue关于图片的引入和错误图片展示

    技术2022-07-11  92

    1、关于图片的引入有两种方式:

    require路径直接引入 (1)关于require引入: <div> <img :src='imgSrc'/> </div> <script> created(){ this.imgSrc = require('@/assets/default-avatar.png') } </script>

    (2)关于路径直接引入

    <div> <img :src='@/assets/avatar.png'/> </div>

    2、错误图片展示 在图片展示时,通过接口调用时,会出现加载延迟或者图片地址失效的情况,这个时候需要展示一张默认图片:

    <img :src='imgUrl' @error='handleError'/> created(){ //执行方法 this.handleError() }, methods:{ handleError(e){ e.target.src = reqiure('@/assets/error.png') //默认展示错误图片 } }

    看都看到这里了 打赏下吧 有钱出钱 没钱的点个关注叭~

    Processed: 0.011, SQL: 9