Vue中错误图片的处理的实现代码

2024-11-27 05:56:44

在一个Vue的PC项目中，要求给错误图片不要让它显示丑陋的图片，就要给图片写一个失败后的默认图片，

在这里写了两种方法，

第一种方法，也就是百度到的最多的代码，就是给一张图片一个默认值。

第二种问题，如果页面中有很多地方都存在这个东西，那么在不同的页面中写很对是很麻烦的。

就使用到了VUe的指令。

这里分为了两种情况，一种是直接加载默认图片，等图片加载完成之后再使用加载完成的图片。

代码如下

// 如果自定义指令多的话，再重新开启一个文件专门写自定义指令 太乱了
//全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片
//指令名称为：real-img
// 通用错误图片的处理方法，或者也可以懒加载的样子
Vue.directive('real-img', async function (el, binding) {
 let imgURL = binding.value;//获取图片地址
 if (imgURL) {
  let exist = await imageIsExist(imgURL);
  if (exist) {
   el.setAttribute('src', imgURL);
  }
 }
});

/**
* 检测图片是否存在
* @param url
*/
let imageIsExist = function (url) {
 return new Promise((resolve) => {
  var img = new Image();
  img.onload = function () {
   if (this.complete == true) {
    console.log('资源加载');
    resolve(true);
    img = null;
   }
  }
  img.onerror = function () {
   console.log('资源error', img);
   resolve(false);
   img = null;
  }
  img.src = url;
 })
};

使用方式

<div class="appd_d_ch_logo">
<img src="../../assets/img/error/app_d.png" v-real-img="appDetail.icon" alt="">
</div>

第二种是直接加载图片，等到加载失败的时候使用默认图。

/**
* 检测图片是否存在
* @param url
*/
let imageIsExist = function (url) {
 return new Promise((resolve) => {
  var img = new Image();
  img.onload = function () {
   if (this.complete == true) {
    console.log('资源加载');
    resolve(true);
    img = null;
   }
  }
  img.onerror = function () {
   console.log('资源error', img);
   resolve(false);
   img = null;
  }
  img.src = url;
 })
};

// 单独作用于应用模块的管理
// 传的是错误的图片
Vue.directive('err-img', async function (el, binding) {
 let imgURL = binding.value;//获取图片地址
 let realURL = el.src;
 if (imgURL) {
  let exist = await imageIsExist(realURL);
  if (!exist) {
   el.setAttribute('src', imgURL);
  }
 }
});

Vue文件中使用方式如下

<div class="appd_d_ch_logo">
<img src="../../assets/img/error/app_d.png" v-real-img="appDetail.icon" alt="">
</div>

很久了学习一点新东西还是感觉挺高兴的，Vue指令很多人都见过，但是到了用的时候总是没想到，还是百度看到改造了一点点。

一段js代码不需要引入在所有的页面中使用很容易的办到，可以把这一段js代码放到Vue.prototype上面。

之前一直在想这个问题，有什么方式可以让所有的代码都可以使用一段函数或者是什么的，看到了指令，还是要多看看文档，只有到了用的时候才可能想到自己曾经看到过这么一段话，再重新翻看文档使用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

Vue项目运行npm run build后会生成一个dist文件夹,我们一般都是把这个文件夹部署到服务器上.dist文件夹里边有一个static文件和一个index.html页面,这个index就是最后单页面的最终文件. 问题一:我在打包完成后,打开index.html文件发现地址并没有携带路由. 这样的话页面就是空白了,因为没有组件被添加到页面中.打开F12会看到一堆的红色failed请求.打开请求地址是这样的. 进入D盘就开始寻找static文件夹当然是找不到的.既然知道了是打包之后寻找文件
解决vue项目打包后提示图片文件路径错误的问题

vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片文件,当时部署后报错路径问题, 当时的想法就是简单粗暴,直接在build好的文件修改了文件路径,再后来项目中遇到了一大堆静态资源,修改路径显然是不行的,看了一下生成文件大概知道是文件目录改变了,所以引用的路径也要随之改变,网上最简单的方法是修改 'config/index.js'文件中的 build
vue-cli中打包图片路径错误的解决方法

最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法,终于给摸索出来.将项目部署到服务器上分为两种:一种是直接部署到服务器的根目录,另外一种是部署到服务器的子目录下 1.我们首先来说部署到根目录下就是比如:www.****.com 找到项目中config文件夹下的index.js文件将文件中的assetsPublicPath: '/',改成如下方框这样. 这样的目的是将绝对路径改成相对路径如果放在根目录下,这样就可以了 2.放在子目录下如
vue webpack打包后图片路径错误的完美解决方法

项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示. 解决办法如图: (1). 修改 assetsPublicPath: './' (2).打开webpack.prod.conf.js,在output:增加 publicPath:
Vue中错误图片的处理的实现代码

在一个Vue的PC项目中,要求给错误图片不要让它显示丑陋的图片,就要给图片写一个失败后的默认图片, 在这里写了两种方法, 第一种方法,也就是百度到的最多的代码,就是给一张图片一个默认值. 第二种问题,如果页面中有很多地方都存在这个东西,那么在不同的页面中写很对是很麻烦的. 就使用到了VUe的指令. 这里分为了两种情况, 一种是直接加载默认图片,等图片加载完成之后再使用加载完成的图片 . 代码如下 // 如果自定义指令多的话,再重新开启一个文件专门写自定义指令太乱了 //全局注册自定义指令,用于
vue中实现图片和文件上传的示例代码

html页面 <input type="file" value="" id="file" @change='onUpload'>//注意不能带括号 js代码 methods: { //上传图片 onUpload(e){ var formData = new FormData(); f ormData.append('file', e.target.files[0]); formData.append('type', 'test');
浅谈vue中使用图片懒加载vue-lazyload插件详细指南

在vue中使用图片懒加载详细指南,分享给大家.具体如下: 说明当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点. 使用方式使用vue的 vue-lazyload 插件插件地址:https://www.npmjs.com/package/vue-lazyload 案例 demo: 懒加载案例demo Installation 安装方式 npm $ npm i vue-lazyload -D CDN CDN: https:
Vue 中对图片地址进行拼接的方法

拿到一组数据,其中的img地址是这样的我们想要将它转化为正常的图片地址,需要使用for循环来将图片拼接起来 getSingList(){ getSingerList().then((res) =>{ if (res.code==ERR_ok){ this.singers=res.data.list console.log(this.singers) for(var i=0;i<this.singers.length;i++){ this.singers[i].Fsinger_mid='//y
vue中当图片地址无效的时候,显示默认图片的方法

web项目中经常需要展示图片,很可能就会碰到图片地址无效的情况,比如图片地址不对,或者后台拿到图片地址后,该地址无效,或者数据库中没有该图片等情况.这时候,图片就会显示一个叉. 对于项目中出现的这种情况,我们也可以不做处理,但是比较影响美观,所以我们都会使用一个默认的图片来代替图片原来的地址. <img :src="item.img" @error="imgError(item)" /> 给图片添加一个error校验,当图片加载失效的时候,就会调用该属性
解决betterScroll在vue中存在图片时,出现拉不动的问题

1.先写一个图片加载的方法 class ImgLoadClass { static preloadImages = (arr) => { //已经加载完的图片数量 let loadeImage = 0 //存放图片的数组 let newImages = [] //处理存入字符串,取得src部分 //let arr = str.match(/src="(.+)"\s{1}/g) //返回一个promise对像 return new Promise((resolve,reject)=
vue中实现图片压缩 file文件的方法

项目中遇到上传图片需要在前端进行图片压缩,将我的实现思路记录一下.(我已经拿到上传的file文件的前提下) 先创建一个公用的js,这里我的是api.js,里面封装一些常用的方法将图片压缩的方法写到这个公用的js(api.js)中 //base64转码(压缩完成后的图片为base64编码,这个方法可以将base64编码转回file文件) function dataURLtoFile(dataurl) { var arr = dataurl.split(','), mime = arr[0].ma
Vue press 支持图片放大功能的实例代码

介绍 VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题.它是为了支持 Vue 子项目的文档需求而创建的. 由 VuePress 生成的每个页面,都具有相应的预渲染静态 HTML,它们能提供出色的加载性能,并且对 SEO 友好.然而,页面加载之后,Vue 就会将这些静态内容,接管为完整的单页面应用程序(SPA).当用户在浏览站点时,可以按需加载其他页面. 前两天接触到了 Vuepress ,颜值很高,界面简洁,容易上手.于是
vue中for循环更改数据的实例代码(数据变化但页面数据未变）

废话不多说了,直接给大家贴代码了,具体代码如下所示: let that = this; for(let i = 0;i<that.tableData.length;i++){ this.tableData[i].zzzk = this.midForm.zzzk; console.log(this.tableData[i].zzzk) this.tableData[i].zhje = this.tableData[i].zzzk * this.tableData[i].dj * this.tabl
vue中的面包屑导航组件实例代码

vue的面包屑导航组件用来将其放到navbar中: Breadcrumb/index.vue <template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.pat

Vue中错误图片的处理的实现代码

相关推荐

随机推荐