img图片丢失后默认图
发表于|更新于
|浏览量:
万物并育而不相害，道并行而不相悖。一一《礼记》
我们在使用img标签时经常会遇到图片丢失等情况，我们可以给图片设置一个默认图
写法如下：
1 | <img src onerror="this.src='/img/oss/2020-06-01/head.jpg'" /> |
这时候我们并没有给src属性赋值，导致触发onerror事件，执行了其中的js
当然如果我们是正常的图片，是无影响的
相关推荐
2024-06-16
网页让软件识别的小卡片
我越是孤独，越是没有朋友，越是没有支持，我就得越尊重自己。——《简爱》 今天发现一个问题，有的网页分享出来是带标题、描述和图标的 如何让它识别出来呢？ 这遵循一个“开放图谱协议” https://ogp.me/ 开放图谱协议使任何网页都可以成为社交图谱中的丰富对象。例如，这在 Facebook 上使用，允许任何网页具有与 Facebook 上任何其他对象相同的功能。 比如 要将网页转换为图形对象，您需要向页面添加基本元数据。我们的协议初始版本基于 RDFa，这意味着您将在网页的 <head> 中放置额外的 <meta> 标记。每个页面的四个必需属性是： og:title - 对象应出现在图表中的标题，例如“The Rock”。 og:type - 对象的类型，例如“video.movie”。根据您指定的类型，可能还需要其他属性。 og:image - 图像 URL，应代表图表中的对象。 og:url - 对象的规范 URL，将用作图表中的永久 ID，例如“https://www.imdb.com/title/tt0117500/”。 ...
2025-05-17
pickr
业精于勤，荒于嬉。—— 韩 愈《进学解》 https://github.com/simonwep/pickr Pickr：一个简单、多主题、响应式且可定制的颜色选择器库在网页设计和前端开发中，颜色选择器是一个不可或缺的工具。虽然许多框架提供了内置的颜色选择器，但它们往往难以扩展或自定义。Pickr 是一个轻量级、无依赖的颜色选择器库，它提供了丰富的功能，同时完全兼容所有主流 CSS 框架。 什么是 Pickr？Pickr 是一个开源的颜色选择器库，支持多种颜色格式（如 rgba、hsla、hsva 等），并提供多种主题和自定义选项。它专为现代前端开发设计，具有以下特点： 核心特点： 无依赖：不依赖任何第三方库（如 jQuery）。 多格式支持：支持 rgba、hsla、hsva、hex 和 CMYK 格式。 多主题：内置多种主题样式，兼容主流 CSS 框架（如 Bootstrap、Materialize）。 响应式设计：适配移动端和桌面端。 自定义能力：可通过 JavaScript 和 CSS 轻松自定义外观和功能。 支持透明度：包括 alpha 通道的选择。 轻量级：小巧...
2025-01-24
css循环淡入淡出播放
令她反感的，远不是世界的丑陋，而是这个世界所戴的漂亮面具。——《不能承受的生命之轻》 代码如下： 12345678910111213141516171819202122232425262728293031323334353637383940import React from "react";import clsx from "clsx";import styles from './index.module.css';import Layout from "@theme/Layout";function HomepageHeader() { return ( <header className={clsx('hero', styles.heroBanner)}> <div className={clsx(styles.heroContainer)}> <img clas...
2025-12-12
Handy
行动不一定带来快乐，但无行动则决无快乐。——本杰明·富兰克林 Handy：离线、自由、可扩展的语音转写应用，让你的电脑“更懂你”在语音交互逐步成为主流的今天，很多人却因为隐私、网络不稳定或商业限制无法安心使用语音转写。Handy 选择了一条简单直接又极具意义的路线：完全离线的开源语音转写应用。它不仅免费、开源，还强调可扩展与跨平台体验，是个人创作者、隐私敏感场景以及办公环境的一剂良方。 项目地址：cjpais/Handy 官网主页：https://handy.computer 项目描述：A free, open source, and extensible speech-to-text application that works completely offline. 主语言：TypeScript License：MIT Stars：8,299+ Forks：555+ 关键词：speech-to-text accessibility cross-platform tauri-v2 为什么是 Handy？ 完全离线：隐私不外流，内网/弱网环境也能稳定...
2021-02-14
uniapp实现简单登录注册
生活的情况越艰难，我越感到自己更坚强，甚而也更聪明。——高尔基 首先去uniapp官网 可以看到介绍 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 DCloud公司拥有600万开发者用户，几十万应用案例、12亿手机端月活用户，数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。 uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。 首先我们去下载官方IDE——HBuilderX 解压 启动IDE——HBuilderX.exe 我们点击文件->新建-...
2024-08-22
ts的&和|类型
如果结果不如你所愿，就在尘埃落定前奋力一搏。——《夏目友人帐》 文档： https://www.typescriptlang.org/docs/handbook/2/objects.html#intersection-types 让我们用中文来解释这两个例子的区别，并通过几个例子帮助你理解。 交集类型 123type Bar = { x: number };type Baz = { y: number };type Foo = Bar & Baz; 结果 Foo 类型: { x: number; y: number } 解释: Foo 是 Bar 和 Baz 的交集类型。它必须同时拥有 x 和 y 两个属性。 示例: 12const obj: Foo = { x: 5, y: 10 }; // 合法const obj2: Foo = { x: 5 }; // 非法，因为缺少 `y` 联合类型 123type Foo = { x: number };type Ba...