（vue）解决返回默认默认图片处理

芸鹤

已于 2023-03-20 16:03:04 修改

阅读量88

点赞数

文章标签：前端

于 2023-03-20 16:02:01 首次发布

本文链接：https://blog.csdn.net/m0_53534314/article/details/125724654

版权

import avatar from "../images/avatar.png";

userInfo() {

如果前5位字符没有http 的请求就返回本地的默认图片

if (this.$store.state.userInfo.headPic.substr(0,4) != "http") {

this.$store.state.userInfo.headPic = avatar;

}

//如果前5位没有http 的请求就返回接口上传的图片

return this.$store.state.userInfo;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

芸鹤

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（vue）解决返回默认默认图片处理

如果前5位字符没有http 的请求就返回本地的默认图片。//如果前5位没有http 的请求就返回接口上传的图片。
复制链接

扫一扫

基于vue 动态加载图片src的解决方法

08-28

基于vue 动态加载图片src的解决方法一、 Vue 中的动态加载图片src问题在 Vue 项目中，动态加载图片src是一个常见的问题。当我们使用 Vue 编写项目时，经常会遇到图片加载不出来的问题，特别是在使用 webpack ...

解决vue的 v-for 循环中图片加载路径问题

10-18

- **错误处理**：添加错误处理机制，当图片加载失败时，可以显示默认图片或提示信息。在实际开发中，确保图片正确加载并处理可能出现的问题是提高用户体验的关键。通过理解和解决这些问题，我们可以构建更加健壮的...

参与评论您还未登录，请先登录后发表或查看评论

vue后端返回的图片为空或者路径错误，显示默认图片

小白前端

04-20

644

这里解决问题的方式是使用vue自定义指令，注意vue中使用本地的图片路径需要使用require（）的方式引入。

vue 将后端返回的图片设置为背景图片

m0_58565372的博客

11-15

1887

2.backgroundImage使用的是驼峰命名，不是background-image。注：1.userinfo.userAvatar是后台返回的用户头像的图片。需求：需要将用户头像设置成背景图，但是用户头像是后台返给我的数据。通过这行代码就能实现其效果。

vue图片出错显示默认图片

lovepink527的博客

03-14

1113

vue图片出错显示默认图片图片出错分为：网络异常导致图片加载不成功图片地址出错导致图片地址加载不成功解决方案网络异常使用样式给图片添加伪类，图片不显示时，显示背景图片 img { width: 100%; height: 100%; position: relative; &:after{ content: ""; display: inline-block; position: absolute; z

vue解决图片报错，添加默认图片

qq_51441779的博客

11-15

1153

vue解决图片报错，添加默认图片一级目录二级目录三级目录一级目录二级目录三级目录

Vue中图片加载问题总结

XYZ

08-09

2241

1. favicon.ico 504问题注意，由于更改的是配置文件，所以需要重新npm run dev运行该项目。 2. 图片引用加载不出来 vue中常见的两种图片引用方式如下：直接img标签的src属性传入绝对路径或者相对路径；使用img标签（其他组件，如el-avatar）的src属性绑定变量值，需要注意的是，变量值必须是通过require引进本地图片或者网络上的图片。 <template> <el-container> <el-aside clas

vue中当图片地址无效的时候,显示默认图片的方法

10-18

今天小编就为大家分享一篇vue中当图片地址无效的时候,显示默认图片的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue+elementUI(el-upload)图片压缩,默认同比例压缩操作

11-19

最后，通过调整`canvas`的`toDataURL`方法的第二个参数（图片质量`quality`），生成压缩后的base64编码，再将其转换为Blob对象返回。 2. **Element UI的`el-upload`组件** `el-upload`是Element UI库中用于文件...

vue组件内的一些图片，因为网络原因图片没加载到。

qq_38203646的博客

04-03

1107

在img标签上添加onerror="javascript:this.src='图片路径';onerror=null;"，可以在图片加载失败后使用备用的图片。onerror=null需要添加，不然如果备用图片也加载失败会陷入死循环。...

关于vue清除默认样式&scoped

hlonelier的博客

07-06

3601

父组件有`scoped`属性，子组件无，父组件也无法设置子组件样式，因为父组件的所有标签都会带有data-v-469af010唯一标志，但子组件不会带有这个唯一标志属性，与1同理，虽然我们可以在全局中通过该类标签的标签选择器设置样式，但会影响到其他组件。总之，`scoped` 样式是 Vue 提供的一种实现组件样式局部化的机制，它可以确保组件样式的隔离和可维护性，使样式的影响范围局限在组件内部，不会对其他组件或全局样式产生冲突。这意味着选择器的特殊性可能会改变，你可能需要使用更具体的选择器来覆盖全局样式。

img标签 src 引用图片资源无法显示问题

qq_36608036的博客

12-28

3924

img标签 src 引用图片资源无法显示的问题 img标签 src使用网络资源在浏览器中无法加载显示 ##### 解决方案:在 header 加入 meta <meta name="referrer" content="never">

vue实现头像上传

weixin_45414972的博客

11-18

3213

<div class="item_bock flex flex_x_center"> <label> <img :src="userInfo.avatar" /> <input type="file" accept="image/*" @change="handleFile" class="hiddenInput" />...

Vue后端返回图片,前端显示

localhost

06-12

1801

height40px;

vue和js分别处理后台传过来的图片流在前端img的src中展示

Sunny_lxm的博客

08-22

8626

参考网址： 1、https://www.jianshu.com/p/1432e0f29abd 总的14.3/ 2、https://blackstar.coding.me/2018-08-23-arraybuffer-to-base64orblob.html 3、https://blog.csdn.net/dongxingpeng/article/details/83143977此网...

超好用-后端返回图片乱码Vue前端的处理方式

二三的博客

03-08

3748

vue处理后端图片乱码问题后端返回的图片信息是乱码的情况时，前端如何将乱码处理成图片后端返回的信息如下图：这是个jpeg格式的二进制流，不是常见的base64，所以需要在前端做一个处理。 state.imgUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}` 将imgUrl的值放入img标签

Vue项目中引入ELementUI图片显示不出来换成默认图片

qq_45632659的博客

05-12

1743

从服务器获取到的图片URL有问题，展示出来的是这样的看上去不太好看，想换成一个默认图片，百度了好几个方法只有这一个成功了，哈哈我好菜先看效果图: 看着舒服多了，哈哈。上代码： img标签中写 :onerror="defaultImg" data中写 // 服务器返回的图片显示不出来时换成默认的图片 defaultImg:'this.src="' + require('../../../assets/error.png') + '"' ...

vue 如何根据后台返回来的图片url进行图片下载

weixin_43645980的博客

11-16

2109

vue 如何根据后台返回来的图片url进行图片下载传送门儿 downloadByBlob(url, name) { let image = new Image(); image.setAttribute("crossOrigin", "anonymous"); image.src = url; image.onload = () => { let canvas = document.createElement("canvas");

如何在前端显示后端返回的图片流（以Vue为例）