img图片丢失后默认图

发表于2022-01-08|更新于2026-02-24

|浏览量:

万物并育而不相害，道并行而不相悖。一一《礼记》

我们在使用img标签时经常会遇到图片丢失等情况，我们可以给图片设置一个默认图

写法如下：

1	<img src onerror="this.src='/img/oss/2020-06-01/head.jpg'" />

这时候我们并没有给src属性赋值，导致触发onerror事件，执行了其中的js

当然如果我们是正常的图片，是无影响的

相关推荐

vue2使用vite过渡

君子藏器与身，待时而动。——佚名项目介绍 vite-plugin-vue2 是一个 Vite 插件，专门用于在 Vite 项目中支持 Vue 2。Vite 是一个基于 ES Module 的现代构建工具，它以极速启动、模块热替换（HMR）和极快的构建速度而闻名。然而，Vite 最初只支持 Vue 3，而 vite-plugin-vue2 插件使得开发者能够在不升级到 Vue 3 的情况下，继续享受 Vite 的高效开发体验。通过这个插件，开发者可以在 Vue 2 项目中体验到 Vite 的快速启动、热重载和高效打包，而无需迁移到 Vue 3。这为那些已经深度使用 Vue 2 的项目提供了极大的便利。主要特点： Vue 2 支持：在 Vite 项目中使用 Vue 2，无需进行复杂的配置或迁移。现代开发体验：支持 Vite 的快速启动、热模块替换（HMR）、高效的编译和打包。兼容性：与现有的 Vue 2 项目无缝集成，不影响现有代码库的运行。 GitHub地址 GitHub 仓库：vitejs/vite-plugin-vue2 官方文档提供了详...

君子先择而后交，小人先交而后择。——王通分享一个为开发者打造的演示文稿工具：https://cn.sli.dev/ Slidev (slide + dev, /slʌɪdɪv/) 是基于 Web 的幻灯片制作和演示工具。它旨在让开发者专注在 Markdown 中编写内容，同时拥有支持 HTML 和 Vue 组件的能力，并且能够呈现像素级完美的布局，还在你的演讲稿中内置了互动的演示样例。它使用了功能丰富的 markdown 文件来生成精美的幻灯片，具有即时重载的体验。它还拥有很多内置的集成功能，如实时编码、导出 PDF、演讲录制等。由于 Slidev 是由 web 驱动的，因此你可以使用它进行任何操作 —— 具有无限的可能性。你可以在为什么选 Slidev 部分了解更多关于本项目的设计初衷。

任凭人群来往，任凭钟声响起，小孩啼哭——决心好好过上一天。——梭罗《瓦尔登湖》分享一个css属性mask： https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask https://css-tricks.com/almanac/properties/m/mask/ CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。这个属性很类似于background属性，但不同的是，background是背景在元素下层，mask是遮罩在元素上层，且mask不支持直接指定color，只支持image对象如图片、svg等同样两者都是组合属性，意味着可以用简写，而不是一个一个去指定 12mask-image: url(/img/oss/blog/vampireachao/bilibili-line.svg);mask-repeat: no-repeat; 可以简写为 1mask: url(/img/oss/blog/vampireachao/bilibili-line.svg) ...

vue中特殊的prop和事件

懒惰等于将一个人活埋。——泰勒我们知道v-model可以用于input等标签，当做语法糖进行绑值对于我们自定义的组件，其实也可以使用官方文档例如此处我们可以让input改变值时，父组件绑定的值一并改变 1234567891011121314151617<template> <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)" /></template><script> export default{ props:{ value:{ type:Boolean, default:()=>false } ...

瀑布流组件vue-waterfall

坦白直率的言语，最容易打动悲哀的耳朵——莎士比亚分享一个vue瀑布流组件 vue-waterfall git地址：https://github.com/MopTym/vue-waterfall.git 竖向排列demo：http://app.moptym.com/vue-waterfall/demo/vertical-line.html 横向排列：http://app.moptym.com/vue-waterfall/demo/horizontal-line.html 竖向+变大：http://app.moptym.com/vue-waterfall/demo/vertical-line-with-grow.html

vue父组件调用子组件方法

抱怨身处黑暗，不如提灯前行。——刘同首先是官方文档这里使用ref属性去访问子元素 1<hello-world ref="helloWorld" msg="Hello World"></hello-world> 然后打印一下 1console.log(this.$refs.helloWorld); 可以看到成功获取到再到子组件定义一个方法：父组件访问：效果：

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中