vue img 标签 src无图片时显示默认图

2024-08-28

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

正常情况下,如果指定图片路径中,图片不存在或指定错误的路径,会因为找不到图片显示叉号,Lodop背景图如果设置了背景图宽度高度控制,显示的叉号也会被相应的放大,形成放大的模糊的图案,看起来就像是黑色边框里有个模糊的白色叉号. 不指定Lodop背景图(用ADD_PRINT_SETUP_BKIMG输出的背景图)宽高的时候,无图片或图片路径错误会显示小叉号,而指定之后,叉号的图片也会随之改变,呈现放大效果.

ie6下使用js替换img标签src属性图片不显示的错误

首先,我必须再次强调一下,F-U-C-K I-E! 其次,简单阐述一下这个bug的出现的情况.页面中有个<a href=”javascript:void(0)” onclick=”swapImgSrc()”>这么一个a标签,swapImgSrc这个方法就是替换页面上一个img标签的src属性,以达到动态切换图片路径的效果.但是,但是,在IE6这个浏览器下图片就不会显示,用鼠标右键点击图片应该在的位置选择“显示图片”才能看到图片内容.使用httpwatch等神器可以发现新图片的加载被aborte

vue自定义指令，比onerror更优雅的方式实现当图片加载失败时使用默认图，提供三种方法

首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决我们都知道,img标签支持onerror事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件.可以使用一张提示错误的图片代替显示不了的图片. 例如这样使用: <img src="images/logo.png" onerror="javascript:this.src='images/

JS检查当图片不存在时显示默认图片和键盘大小写键状态

当图片不存在时显示默认图片 <script type="text/javascript"> var imgs = document.images; for(var i = 0;i < imgs.length;i++){ imgs[i].onerror = function(){ this.src = "http://images2015.cnblogs.com/blog/66516/201511/66516-20151104233425055-1712623

HTML Img标签 src为网络地址无法显示图片问题解决（https）

举例说明: <img src="https://pic.cnblogs.com/avatar/1549846/20191126100502.png" alt="加载失败"> 图片无法显示只需要在<head>标签内添加 <meta name="referrer" content="no-referrer">就可以了 <head> <meta name="refer

通过使用CSS字体阴影效果解决hover图片时显示文字看不清的问题

1.前言最近需要加入一个小功能,在鼠标越过图片时,提示其大小和分辨率,而不想用增加属性title来提醒,不够好看.然而发现如果文字是一种颜色,然后总有概率碰到那张图上浮一层的文字会看不到,所以加入文字字体阴影效果来解决此问题. 2.例子说明未加入字体阴影之前的效果加入字体阴影的效果如果没加入字体阴影的效果,左图会看不清哪些文字的,而右图没有多大区别. 3.相关代码 <div> <img alt="imageSample" style="width

Vue 页面15分钟无操作时返回首页

这种需求手机端和pc端一般是不存在的,因为都是可以手动操作刷新的. 最近在做一个户外社区大屏的项目,因为大屏是全屏显示,没法手动刷新,不可能在页面专门做一个刷新按钮,也不好看,那这样的需求就显得格外重要了. 首先我们来分析一下需求: 1.15分钟——需要定时器 2.无操作——监控页面上的点击.触摸.滑动等事件 3.返回首页——切换路由我们只需要设置一个定时器,在一进入页面的时候就开始计时,如果15分钟内有点击.触摸.滑动等操作时就重新计时,时间一到就切换路由. 而且我们还需要新建一个空白组件r

img图片不存在显示默认图

在项目中,我们使用img标签加载图片,有时候图片地址有可能失效,获取路径问题,导致图片加载失败,img标签就会显示alt内容.这时候用户体验不是很好,所以就需要显示一张默认图片. 第一种方式:使用jquery_lazyload插件实现图片懒加载.只需要在src中写上默认图片地址即可. <img class="lazy" src="/static/images/dlb.jpg" data-original="{{ item.get('CoverUrl'

vue判断图片为空或者图片加载不成功时显示默认图片

纯css解决方案: <img src="broken.png" alt=""> img { position: relative; } img:after { content: url('替代圖片'); display: block; position: absolute; // 底下是故意要填满并且背景填滿擋住底下那個很醜的加載失敗圖片(字体) z-index:; top:; left:; width: 100%; height: 100%; back

Vue.js项目中,当图片无法显示时则显示默认图片

使用require将图片进入,写法如下: data: () => ({logo: 'this.src="' + require('../assets/img.png') + '"'}) 注:我是在data里就将字符串拼接好了,当然也可以在onerror方法里拼接,这里就不赘述了. 然后在img的onerror方法中调用 <img v-bind:src="userData.photo" :onerror="logo" class=&qu

img标签中的图片加载异常时显示默认的图片

备忘:

解决javascript动态改变img的src属性图片不显示问题

首先讲下这个bug的出现的情况,页面中有<a href="JavaScript:void(0)" onclick="document.getElementById('current').src= ‘images/001.jpg’;“>这么一个a标签,onclick中的JS代码就是改变id为current的img标签的src属性,以达到动态切换图片的效果.可是不幸的是:IE是动态改变的图片的路径,但是图片却不显示出来,得右键“显示图片”才能看到改变后的图片,不知是

Vue img的src使用数据绑定不显示

不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败. <img src="{{ imgUrl }}"/> 原因:写法错误解决:应该使用v-bind <img :src="imgUrl"/> 但是有时这种写法图片也加载不出来原因:因为你的imgUrl使用了本地图片的路径. 解决方案1:将图片放在src下的static文件夹内原理:用build打包后的dist文件夹下,文件的位置发生了变动,但是st

Echarts 折线图y轴标签值太长时显示不全的解决办法

问题分析解决办法问题先看一下正常的情况再看一下显示不全的情况所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况. 分析先贴一下页面代码 HTML <div class="row-wrapper"> <div class="div-flex" style="text-align:center"> <div class=&q

IE中在a标签里的图片会显示边框

例如: <a><img src="/UI/Images/ss.jpg"></a>,图的边框会出现a标签默认的边框, 解决办法: img{border:0 none},这样就可以了,注意两个一定都要写上去

jquery鼠标滑过展示图片时显示详情

jquery: <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ //页面边加载边执行 $('.box').hover( function(){ $(this).find('img').animate({width:10

无记录时显示gridview表头，并增加一行显示“没有记录”【绑定SqlDataSource控件时】

原文发布时间为:2008-08-04 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebContro

WPF中Button的背景图片，实现禁止IsMouseOver时显示默认

<Button x:Name="btnPickUpNum" Click="PickUpNum_OnClick" Grid.Row="1" Grid.Column="2"> <Button.Template> <ControlTemplate TargetType="Button"> <ContentControl Name="cc"> &l

vue，onerror实现当图片加载失败时使用默认图

1. 2.

css固定背景图位置实现屏幕滚动时显示背景图不同区域

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .container { width: 100%; padding: 50px 0; padding-bottom: 30px; height: auto; } .container.image-containe

vue img 标签 src无图片时显示默认图

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

Lodop背景图无图片时显示放大叉号问题

ie6下使用js替换img标签src属性图片不显示的错误

vue自定义指令，比onerror更优雅的方式实现当图片加载失败时使用默认图，提供三种方法

JS检查当图片不存在时显示默认图片和键盘大小写键状态

HTML Img标签 src为网络地址无法显示图片问题解决（https）

通过使用CSS字体阴影效果解决hover图片时显示文字看不清的问题

Vue 页面15分钟无操作时返回首页

img图片不存在显示默认图

vue判断图片为空或者图片加载不成功时显示默认图片

Vue.js项目中,当图片无法显示时则显示默认图片

img标签中的图片加载异常时显示默认的图片

解决javascript动态改变img的src属性图片不显示问题

Vue img的src使用数据绑定不显示

Echarts 折线图y轴标签值太长时显示不全的解决办法

IE中在a标签里的图片会显示边框

jquery鼠标滑过展示图片时显示详情

无记录时显示gridview表头，并增加一行显示“没有记录”【绑定SqlDataSource控件时】

WPF中Button的背景图片，实现禁止IsMouseOver时显示默认

vue，onerror实现当图片加载失败时使用默认图

css固定背景图位置实现屏幕滚动时显示背景图不同区域

热门专题

vue img 标签 src无图片时 显示默认图

热门专题

vue img 标签 src无图片时显示默认图