<img> vue 如果没有图片,则添加默认图片

2024-11-11

img如果没有图片显示默认图片效果

img如果没有图片显示默认图片效果<img src="本来要显示的图片URL" onerror="this.src='图片挂了的话要显示的默认图片URL'" />其实就是说,在这个img的行为失败(onerror)的时候,调用javascript:this.src="URL"来给这个img标签重新指定src属性,从而达到显示备用图片的效果.

先上一个工具类,提供了压缩,添加文字.图片水印等方法: image.class.php <?php class Image { private $info; private $image; public function __construct($src) { $info = getimagesize($src); $this -> info = array( "width" => $info[0], "height" => $info[1]

java查询图片显示无图片显示项目默认图片

/** * 读取图片 * @param request * @param record * @return */ @RequestMapping(params ="method=queryWlmxZp") public void queryWlmxZp(HttpServletRequest request,HttpServletResponse response,HttpWlmxZpBean record){ OutputStream outputStream = null; try

Jquery判断页面图片是否加载失败,加载失败则显示默认图片

例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> &l

微信小程序开发——设置默认图片、错误加载图片

小程序不支持h5中的onerrorimg,只开放了binderror属性,当错误发生时,会发布到 AppService,事件对象event.detail = {errMsg: 'something wrong'}. 网上查了下,没有什么好的解决方法,找了几个案例结果都没有实现想要的效果. 结合前边看过的案例,大部分都是采用修改数据源将错误图片替换为默认图片的,但是有好多代码都没贴全,以致不好理解. 下面就根据自己遇到的情况对图片为空.图片路径错误的情况进行了处理,相关代码如下,相关数据都有说明:

vue中的图片加载与显示默认图片

HTML: <div class="content-show-img"> <div class="show-img"> <img class="default-image" :src="data.image" @load="successLoadImg" @error="errorLoadImg"> </div> </div>

vue当图片加载失败时，用一个默认图片替换；

原理就是给img绑定error事件,替换原有的src地址. 首先在data中创建一个defaultImg(随便起的),里面的值是该默认图片的地址: 在html页面的img标签上绑定该属性这样默认图片就设置好了: 这样做的好处就是可以提高用户体验,而图片的alt属性,是在图片显示失败后出现的文字,像下图所示,但是这样的用户体验不高: 像后台管理系统中,如果是这样或者是有一个默认封面的话,会感觉很舒服:

vue中img图片加载中以及加载失败显示默认图片问题

加载中默认图片:主要是onload事件监听,data中定义变量 imgSrc :require('./default.png'): <div class="per-pic" v-for="(item, index) in picData" :key="index"> <img :src="imgSrc" :onload="loadImg(item.url)" /></div&g

vue自定义指令默认图片

/** * 检测图片是否存在 * @param url */ function imageIsExist(url) { return new Promise((resolve) => { var img = new Image(); img.onload = function () { if (this.complete == true){ resolve(true);

Java怎么添加背景图片

首先,导入相关的包: import java.awt.BorderLayout; import java.awt.Container; import javax.swing.ImageIcon; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JPanel; 也可以用: import java.awt.*: import javax.swing.*: 接着,创建一个Java窗体对象,并设置为可见 e

[BS-29] 给UIView添加背景图片

给UIView添加背景图片 //默认情况下只能设置UIView的背景颜色,不能给UIView设置背景图片,但通过绘图知识可以做到 - (void)drawRect:(CGRect)rect { [super drawRect:rect]; [[UIImage imageNamed:@"mainCellBackground"]drawInRect:rect]; } 如果在某个时间点,view的frame变化了,需要调用 [view setNeedsDisplay]; 方法在下次屏幕刷新时

给织梦DEDECMS添加栏目图片与英文名显示

开始做微网站了,不同于传统手机网站,因为微信上的微网站是支持CSS3与HTML5的,好吧,各种要学习的还有很多很多阿~这么多新代码,叹! 本来想转战帝国CMS了,奈何这名字太不对味了,PHPCMS也懒得去摸索了,就还是用这最不安全但是用户最多的DEDECMS吧. 微信上的微网站,首页一般都是用分类图片的,但是我们知道,DEDE的栏目是没有图片功能的,虽然可以把图片链接做到副标题那里,再调用.....好吧,我的分类显示英文就是用的副标题调用的.但是不行阿,时间久了也不是办法,于是只好去修改DEDE

swiper默认显示三个，中间放大且显示全部图片两边显示部分图片的实现方法

本页面内容最后的红色部分有惊喜哦! 最近在做一个活动页面,要求触摸切换图片时,默认在可视区域中显示三张图片,其中中间的一张图片比其他两张都大且全部显示,而其他两张图片只显示部分即可,于是就想到了swiper这个不依赖于任何js库的插件,但是其官网上没有相应的效果,只有那种可以同时显示三张的demo.但是产品说一定要那种效果,其他的效果不好看,于是我就上网查资料,还真让我找到了解决的办法.如下图: <!DOCTYPE html> <html> <head> <met

MFC 添加背景图片并让控件背景透明

/*添加背景图片*/ BOOL CTOOLDlg::OnEraseBkgnd(CDC* pDC) { // TODO: 在此添加消息处理程序代码和/或调用默认值 CDialog::OnEraseBkgnd(pDC); HBITMAP m_hBitmap; HDC m_hBkDC; m_hBitmap = ::LoadBitmap(::GetModuleHandle(NULL),MAKEINTRESOURCE(IDB_BITMAP2)); m_hBkDC = ::CreateCompatibleD

vue build打包后css里的图片路径404不正确的问题

vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../' //添加这句话 }) } else { return ['vue-style-loader'

.net core 实现默认图片

web 上如果图片不存在一般是打xx 这时候一般都是会设置默认的图片代替现在用中间件的方式实现统一设置一次设置全部作用 .net core 实现默认图片 Startup 文件 app.UseDefaultImage(defaultImagePath: Configuration.GetSection("defaultImagePath").Value); 新建类 using Microsoft.AspNetCore.Builder; using Microsof

css代码添加背景图片常用代码

css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; height: 0px; margin: 20px 0px;"> 2 背景图片 {background-image: url(url)|none} 3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定 {

js解决img标签加载失败显示默认图片

问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加载默认图片. $(function(){ //注册加载失败事件,再次加载时先重新设置url,在清空原先的注册加载失败事件 $("img").attr("onerror","this.src='img/error.jpg;this.onerror=null;'&

ios - UINavigationBar添加背景图片的几种简单思路

UITabBarController下面常常需要为多个ViewController设置导航栏样式,总结了一下遇到过的为UINavigationBar添加背景图片的几种简单思路以设置背景图片为例: 第一种,直接在视图里面单独设置每个视图的UINavigationBar,适合每个页面需要不同的导航栏样式. [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav_bg_all-64&q

VC++MFC对话框程序中给对话添加背景图片

VC对话框怎么显示背景图片呢.在MFC中实现背景图片,不像C#应用程序那么简单.今天就和朋友们说说如何在VC界面中设置背景图片 ^_^ 工具/原料 Visual C++ 2010 方法一:用Picture控件 1 新建MFC应用程序 2 在应用程序中,选择基于对话框,其他保持默认即可 3 右击项目,选择添加-资源 4 在添加资源对话框中,点击导入,选择要作为背景的图片 jpg格式的图片可以用画图打开另存为bmp格式 (网上说可以直接jpg格式,自行实验未成功) 下方对话框中资源类型选为bit

[Android] 通过GridView仿微信动态添加本地图片

原文:http://blog.csdn.net/eastmount/article/details/41808179 前面文章讲述的都是"随手拍"中图像处理的操作,此篇文章主要讲述GridView控件实现添加本地图片并显示.主要是关于GridView控件的基本操作,通常可以通过自定义继承BaseAdapter的适配器加载图片,而下面讲述的不是自定义的适配器,而是调用SimpleAdapter实现的.至于上传发布与网络交互此处不讲述,后面文章会讲! 一. 实现效果主要是通过点击