问题:
登录页动态显示不同项目的图片的时候,若环境变量的图片加载失败,如何显示占位图logo?
解决:
<img :οnerrοr="方法" />注意onerror的是方法
关键代码:
<img draggable="false" class="left_img" :onerror="placeholderImageUrl" :src="imageUrl" alt="" />
<template><div class="container"><img draggable="false" class="left_img" :onerror="placeholderImageUrl" :src="imageUrl" alt="" /></div>
</template>
<script>
export default {name: "login",data() {return {placeholderImageUrl:'this.src="' + require('@/assets/login/login.png') + '"',// imageUrl:process.env.VUE_APP_loginImgUrl,imageUrl:null};},computed: {env() {return this.$store.state.env;},},watch:{"env.loginImgUrl": {handler(newVal) {this.imageUrl = newVal;},deep:true,immediate:true,},},mounted() {},methods: {},
};
</script>