登录页加载图片失败的默认图片占位图如何实现?<img>

问题:

登录页动态显示不同项目的图片的时候,若环境变量的图片加载失败,如何显示占位图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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/625176.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

rime中州韵小狼毫 联想词组 滤镜

教程目录&#xff1a;rime中州韵小狼毫须鼠管安装配置教程 保姆级教程 100增强功能配置教程 在 rime中州韵小狼毫 自定义词典 一文中&#xff0c;我们分享了如何在rime中州韵小狼毫须鼠管输入法中定义用户自定义词典&#xff1b;通过自定义词典&#xff0c;我们可以很方便的在…

*(长期更新)软考网络工程师学习笔记——Section 22 无线局域网

目录 一、IEEE 802.11的定义二、IEEE 802.11系列标准三、IEEE 802.11的两种工作模式四、CDMA/CA协议&#xff08;一&#xff09;CDMA/CA协议的定义&#xff08;二&#xff09;CDMA/CA协议的过程 五、AC与AP&#xff08;一&#xff09;接入控制器AC&#xff08;二&#xff09;无…

MySQL解决海量数据和并发性的方案——分库分表

分库分表其实是两个事情&#xff0c;为了解决的东西实际上也是两个&#xff0c;但是一定要注意&#xff0c;不到最后万不得已&#xff0c;不要用分库分表&#xff0c;因为这会对数据查询有极大限制。 数据量太大查询慢的问题。 这里面我们讲的「查询」其实 主要是事务中的查询…

如何实现图片压缩

文章目录 1、canvas实现图片压缩2、其他 1、canvas实现图片压缩 canvas 实现图片压缩&#xff0c;主要是使用 canvas 的drawImage 方法 具体思路 拿到用户上传的文件转成base64创建一个 Image&#xff0c;主要是获取到这个图片的宽度和高度创建一个 2D 的画布&#xff0c;画布…

一文搞懂系列——Linux C线程池技术

背景 最近在走读诊断项目代码时&#xff0c;发现其用到了线程池技术&#xff0c;感觉耳目一新。以前基本只是听过线程池&#xff0c;但是并没有实际应用。对它有一丝的好奇&#xff0c;于是趁这个机会深入了解一下线程池的实现原理。 线程池的优点 线程池出现的背景&#xf…

RocketMQ源码阅读-Message拉取与消费-Broker篇

RocketMQ源码阅读-Message拉取与消费-Broker篇 1. ConsumeQueue是什么2. Message重放2.1 从MappedFile文件读取Message到ConsumeQueue2.2 ConsumeQueue持久化 3. Broker提供的拉取接口3.1 请求Header3.2 拉取消息接口3.3 拉取失败处理 4. Broker提供的更新消费进度接口5. Broke…

C++之类的静态成员

C静态成员是指在类中使用static关键字声明的成员变量或成员函数。静态成员属于类本身&#xff0c;而不是类的对象。它们在所有对象之间共享&#xff0c;只有一份内存空间。静态成员在类外初始化&#xff0c;且只能访问一次。 关键字 static 意味着类中只有一个该成员的实例。静…

Redis面试题16

Redis 的主从复制是什么&#xff1f;它有什么作用&#xff1f; 答&#xff1a;主从复制是指 Redis 中的主节点将自己的数据复制给从节点的过程。主从复制为 Redis 提供了数据的冗余备份、读写分离和故障恢复等功能。 主从复制的过程如下&#xff1a; 主节点将自己的数据变更操…

短视频IP运营流程架构SOP模板PPT

【干货资料持续更新&#xff0c;以防走丢】 短视频IP运营流程架构SOP模板PPT 部分资料预览 资料部分是网络整理&#xff0c;仅供学习参考。 抖音运营资料合集&#xff08;完整资料包含以下内容&#xff09; 目录 抖音15秒短视频剧本创作公式 在抖音这个短视频平台上&#…

【FastAPI】路径参数

路径参数 from fastapi import FastAPIapp FastAPI()app.get("/items/{item_id}") async def read_item(item_id):return {"item_id": item_id}其中{item_id}就为路径参数 运行以上程序当访问 &#xff1a;http://127.0.0.1:8000/items/fastapi时候 将会…

SpringBoot集成RabbitMq,RabbitMq消费与生产,消费失败重发机制,发送签收确认机制

RabbitMq消费与生产&#xff0c;消费失败重发机制&#xff0c;发送确认机制&#xff0c;消息发送结果回执 1. RabbitMq集成spring bootRabbitMq集成依赖RabbitMq配置RabbitMq生产者&#xff0c;队列&#xff0c;交换通道配置&#xff0c;消费者示例 2. RabbitMq消息确认机制消息…

力扣labuladong一刷day59天动态规划

力扣labuladong一刷day59天动态规划 文章目录 力扣labuladong一刷day59天动态规划一、509. 斐波那契数二、322. 零钱兑换 一、509. 斐波那契数 题目链接&#xff1a;https://leetcode.cn/problems/fibonacci-number/description/ 思路&#xff1a;这是非常典型的一道题&#x…

【例7.5】 取余运算(mod) 快速幂

1326&#xff1a;【例7.5】 取余运算&#xff08;mod&#xff09; 时间限制: 1000 ms 内存限制: 65536 KB 【题目描述】 输入b&#xff0c;p&#xff0c;k的值&#xff0c;求bpmodk 的值。其中b&#xff0c;p&#xff0c;kk为长整型数。 【输入】 输入b&#xff0c;p&#xf…

Scott用户数据表的分析

Oracle从入门到总裁:https://blog.csdn.net/weixin_67859959/article/details/135209645 如果想要知道某个用户所有的数据表: select * from tab; 此时结果中一共返回了四张数据表&#xff0c;分别为部门表&#xff08;dept&#xff09; &#xff0c;员工表&#xff08;emp&a…

【LV12 DAY20 RTC实验】

编程实现通过LED状态显示当前电压范围&#xff0c;并打印产生低压警报时的时间 注&#xff1a; 电压在1501mv~1800mv时&#xff0c;LED2、LED3、LED4、LED5点亮 电压在1001mv~1500mv时&#xff0c;LED2、LED3、LED4点亮 电压在501mv~1000mv时&#xff0c;LED2、LED3点亮 电压在…

C++算法学习心得六.回溯算法(1)

1.回溯算法理论基础 回溯法也可以叫做回溯搜索法&#xff0c;它是一种搜索的方式。回溯是递归的副产品&#xff0c;只要有递归就会有回溯。回溯的本质是穷举,穷举所有可能&#xff0c;然后选出我们想要的答案 回溯法解决的问题 组合问题&#xff1a;N个数里面按一定规则找出…

HTML--CSS--浮动布局及定位布局

正常文档布局 块元素独占一行 行内元素在有多个的时候&#xff0c;就是从左到右排在一行 块元素包括&#xff1a;div,p,hr 行内元素&#xff1a;span,i,img 浮动布局 float 属性&#xff1a; left 向左 right 向右 作用我目前看起来就是浮动元素的宽度是由内容决定的&#x…

Doris学习笔记-Java自定义UDAF

项目最近需要做一些数据统计方面的东西,发现数据字段都是很长一串数字的字符串,Doris自带的函数无法对其进行相应的运算操作,需要扩展实现相关的操作运算。 主要参考官方的文档资料完成相关的自定义扩展。需要注意的是在使用Java代码编写UDAF时,有一些必须实现的函数(标记…

网络安全服务

有效防御Cc、API接口、http、tcp、WEB应用扫描/爬虫、SYN、WAF、DDOS、UDP、入侵、渗透、SQL注入、XXS跨站脚本攻击、远程恶意代码执行、session ion fixation、Webshell攻击、恶意请求&#xff0c;恶意扫描、暴击破解、CSRF等各种攻击。不用迁移数据&#xff0c;服务器用哪里…

HDFS和MapReduce综合实训

文章目录 第1关&#xff1a;WordCount词频统计第2关&#xff1a;HDFS文件读写第3关&#xff1a;倒排索引第4关&#xff1a; 网页排序——PageRank算法 第1关&#xff1a;WordCount词频统计 测试说明 以下是测试样例&#xff1a; 测试输入样例数据集&#xff1a;文本文档test1…