vue+ts的el-image的方法显示图片

最新推荐文章于 2024-05-29 17:42:33 发布
最新推荐文章于 2024-05-29 17:42:33 发布
阅读量689 收藏 7
点赞数 9
分类专栏： TS + Vue2 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chabaimgg/article/details/135815112
版权
文章描述了一个使用JavaScript在前端根据特定条件动态加载不同图片的实例，通过`equ`对象的`carNumber`和`EquState`属性来决定加载`xqc2.png`、`xqc3.png`中的哪一个。
摘要由CSDN通过智能技术生成

 根据不同条件显示不同图片

<el-image class="imgcss" :src="getCarImg(equ)"></el-image>

下面的是方法 

  private getCarImg(equ) {
    if (equ && equ.carNumber && equ.EquState != '鹤位空闲') {
      return require('@/assets/largScreenImg/xqc2.png')
    } else if (equ && equ.EquState == '鹤位空闲') {
      return require('@/assets/largScreenImg/xqc3.png')
    } else {
      return require('@/assets/largScreenImg/xqc2.png')
    }
  }

行走的茶白
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+el-table制作岗位排班表
04-13
vue+el-table制作岗位排班表
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
前端图片放大（Element UI中的el-image，Element UI中的图片放大功能）
weixin_65793170的博客
04-02 3586
Element UI 中，为了实现图片的大图预览功能，可以使用el-image组件配合el-image组件来完成。
Element-ui中的el-image的图片预览功能（:preview-src-list）
热门推荐
weixin_46753476的博客
07-11 3万+
今天用了element-ui中的图片预览功能，但是它的图片预览功能只能预览事先定义的图片，与我的业务功能完全不符，我的业务功能是在表格上显示多张图片，当点击图片时，就预览当前点击的图片。 所以我将其修改了一下，将后端返回的图片依次渲染在页面上；功能就是当点击表格中的某个图片时，这个图片就被放大预览，且图片的显示是以轮播图的形式展现出来。.........
el-image本地图片不显示，提示加载失败
最新发布
我是小鹏呀的博客
05-29 823
问题描述：el-image使用本地图片不显示，提示加载失败。
ElementPlus 源码学习之 el-image 的基本实现思路
qq_39559879的博客
04-05 6310
el-image 的基本功能有： 加载中占位 加载失败占位 加载成功显示图片 图片懒加载 先考虑加载占位的情况，我们不难发现加载有成功、失败、加载中这三种状态，由于加载成功这个状态可以视为其他两种状态的排除，所以实际上我们只需要定义两个状态： // 默认为加载中状态 loading = ref(true); // 默认加载没有出错 error = ref(false); 然后提供插槽让用户可以自定义加载中和出错的图片占位： <template> <slot v-if="load
element-ui图像组件、上传组件、分页组件
m0_74331160的博客
01-13 3180
图像组件 上传组件 分页组件
关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题
qq_45706352的博客
03-15 3785
在 element 组件上使用相对路径时 webpack 不会对路径进行处理，导致请求了一个无效的路径。【附】：:src属性后面的字符串会被当做变量解析使用，而src属性后面的只会被当字符串使用。在网页中加载本地图片时，会出现图片加载失败的问题，但使用。（注意给 src 属性加 : ）
不点击图片，直接实现el-image的大图预览功能
茶荼
03-09 4662
不点击图片，直接实现el-image的大图预览功能
vue+axios+el-upload实现文件上传（带参数）：
01-03
上传头像 备注：不要自己设置请求头类型，让浏览器自己解析，如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误（415错误Unsupported Media Type）；请将此配置注释掉；...
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
Vue2+El-Menu 实现路由跳转及当前项的设置方法实例 Vue.js 是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。 vue2+...
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
总结一下，实现Vue+Element UI(`el-upload`)的图片压缩功能，我们需要做以下几步： 1. 定义一个通用的图片压缩函数，利用`Image`、`Canvas`和`Blob`对象进行压缩。 2. 在Vue组件中使用`el-upload`，设置`before-...
el-image大图预览踩坑
dragonzoebai的专栏
07-27 2903
el-image 多图片预览遇到的问题及按钮触发预览
基于el-image，封装一个图片预览组件
qq_44753311的博客
05-16 5770
el-image本身设计已非常优秀，但图片预览功能存在以下不足： 1.没有相应的用户反馈，用户无法直观的知道该图片可以点击查看详情； 2.预览图片的列表需要单独配置一个数组，在实际开发中往往是需要查看当前图片；
使用element-ui的el-image图片预览功能 支持图片下载
qq_42828496的博客
08-01 1万+
项目场景： 工作中我们常用会到 vue+element，其中预览组件难免会涉及到下载功能，或者其它扩展功能，但是el-image 支持的只是 简单放大旋转功能，解决方法 要么 修改组件，要么 通过 js动态渲染进去，接下来看操作 解决方法： 通过点击放大时，添加点击事件，然后通过append 添加 按钮并且绑定事件，还是看下图吧，兄弟们，粘起来 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&gt
在element中el-image如何显示本地图片
甜心的专栏
07-22 1万+
使用el-image引入图片，会出现“FAILED” 的情况，把正常img标签中的src="@/assets/logo.png"换成:src="require('@/assets/logo.png')"就可以了。 <div> <h3>img引入本地图片</h3> <img src="@/assets/images/demo.jpeg" width="200"> </div> <div> <h.
Element-Plus 图片预览多种实现方法
我总是词不达意的博客
01-08 4413
Element-Plus 图片预览多种实现方法
前端显示后端传的图片流
Small_Tuzki的博客
11-03 3415
后端返回样式 显示是乱码格式，但其实是图片返回就是这样 前端请求的参数 { url: '/make/gsppackmin/downLoadImage/' + id, method: 'get', responseType: "blob" } 这样返回的就是blob格式的图片了 vue代码 <div class="block"> <el-image style="width: 400px; height: 400px" :src="src">
vue3+ts使用element的上传怎么上次文件显示图片
07-27
要在Vue3和TypeScript中使用Element Plus的上传组件并显示上传的图片，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Element Plus和Vue Router插件，并在main.ts中进行了集成。你可以使用npm或yarn命令进行安装。 2. 在App.vue文件中，你需要修改模板部分，添加一个文件上传的组件。你可以使用`el-upload`组件来实现文件上传功能。在模板中，你可以添加一个`el-upload`标签，并设置相应的属性，如`action`、`onSuccess`等。同时，你可以使用`el-image`组件来显示上传的图片。在`el-upload`的`onSuccess`回调函数中，你可以将上传成功后的图片地址保存到data中，并在`el-image`中使用该地址进行显示。 3. 在App.vue的脚本部分，你需要导入`ref`和`reactive`函数，并在`setup`函数中定义一个`ref`变量来保存上传成功后的图片地址。在`onSuccess`回调函数中，你可以通过`ref`变量来更新图片地址。 下面是一个示例代码： ```vue <template> <el-upload action="/upload" :on-success="handleUploadSuccess" :show-file-list="false" > <el-button>点击上传</el-button> </el-upload> <el-image v-if="imageUrl" :src="imageUrl" fit="contain"></el-image> </template> <script> import { ref } from 'vue'; export default { name: 'App', setup() { const imageUrl = ref(''); const handleUploadSuccess = (response) => { // 上传成功后的处理逻辑 // 可以根据接口返回的数据来获取图片地址 imageUrl.value = response.data.imageUrl; }; return { imageUrl, handleUploadSuccess, }; }, }; </script> ``` 在上面的示例中，`handleUploadSuccess`函数是上传成功后的回调函数，你可以根据实际情况来处理上传成功后的逻辑。`imageUrl`是一个`ref`变量，用于保存上传成功后的图片地址。在模板中，使用`v-if`指令来判断是否有图片地址，如果有则显示`el-image`组件，并将图片地址作为`src`属性传递给`el-image`组件。 请注意，上述示例中的`action`属性需要根据你的实际后端接口进行设置，以确保文件上传功能正常工作。另外，你可能还需要根据实际需求对上传组件进行进一步的配置和样式调整。 #### 引用[.reference_title] - *1* [vue3+ts引入element](https://blog.csdn.net/weixin_39945506/article/details/124613663)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vite+vue3+ts+element-plus项目搭建--超详细](https://blog.csdn.net/weixin_44255044/article/details/119566408)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值