vue3 渲染一个后端返回的图片字段渲染、table表格内放置图片

news2024/12/24 10:48:58

一、后端直接返回图片url

当图片字段接口直接返回的是图片url,可以直接放到img标签上

   <img v-if="thumbLoader" class="r-image-loader-thumb" :src="resUrl" />

二、当图片字段接口直接返回的是图片Id

那么就需要去拼一下图片链接

调用下接口吧返回的id传过去拼接即可

<img v-if="thumbLoader" class="r-image-loader-thumb" :src="imgSrc" />

 

const imgSrc = computed(() => {
    
        return `/bnc_rest/market/file/${resUrl};
     
});

三、接口直接返回的是图片文件 

需要自行拼接


------------------------结构部分
<img v-if="thumbLoader" class="r-image-loader-thumb" :src="logo" />

------------------------js部分
import { getEnterpriseLogo } from "@/api/index.js";

const logo = computed(() => {
    let url = "";
    if (props.detail && props.detail.enterpriseVO && 
    props.detail.enterpriseVO.enterpriseId) {
   //在api.js文件里写个方法调用 或者直接拼
      //1.调用的方法
      url = getEnterpriseLogo(props.detail.enterpriseVO.enterpriseId);
      //2.直接在当前页面拼接
      // url = `/bnc_rest/org/orgunits/${props.detail.enterpriseVO.enterpriseId}/logo`;
    }
    return url;
});

api/index.js文件

/**
 * 获取企业logo
 */
export const getEnterpriseLogo = id => {
    return `/bnc_rest/org/orgunits/${id}/logo`;
};

相当于一个预览接口

/**
 * 预览文件
 * @param {string} fileId 文件id
 */
function purview(id) {
    window.open(`/bnc_rest/market/file/${id}`);
}

四、table表格里去放置图片字段

用的ui组件库为arco-deiagn vue 组件库

 <a-table
                column-resizable
                :bordered="{ headerCell: true, wrapper: false }"
                :data="rtableTableData"
                :scrollbar="false"
                :pagination="false"
                :row-selection="rowSelection"
                @row-click="rowClick"
                v-model:selected-keys="selectedKeys"
                :row-key="rowKey"
                v-bind="{ ...OtherProps }"
                :scroll="scrollConfig"
                @select="rowSelect"
                @select-all="rowAllSelect"
                :span-method="spanMethod"
                ref="tableRef"
            >
                <template #summary-cell="{ column, record }">
                    <div>{{ record[column.dataIndex] }}</div>
                </template>
                <template #columns>
                    <a-table-column align="left" title="序号" v-if="showSeq" :width="showSeqWidth" class="first">
                        <template #cell="{ rowIndex }">{{ currentPageStart + rowIndex }}</template>
                    </a-table-column>
                    <a-table-column
                        v-for="(c, i) in columns"
                        :width="c.width ? c.width : i + 1 < columns.length ? 120 : undefined"
                        :align="c.align ? c.align : 'left'"
                        :title="c.title"
                        :data-index="c.dataIndex"
                        :fixed="c.fixed ? c.fixed : ''"
                        :key="i"
                    >
                        
                        <template #cell="{ rowIndex, record, column }">
                            <!-- 自定义单元格内容 -->
                            <slot
                                :name="c.slotName ? c.slotName : c.dataIndex"
                                :rowIndex="rowIndex"
                                :record="record"
                                :cell="record[column.dataIndex]"
                            >
                                <!-- 图片 -->
                                <template v-if="c.type && c.type == 'img'">
                                    <RImage
                                        v-if="record[column.dataIndex]"
                                        fit="cover"
                                        height="32"
                                        width="100%"
                                        :src="record[column.dataIndex]"
                                        show-loader
                                        class="r-table-content-img"
                                    ></RImage>
                                    <span v-else>-</span>
                                </template>
                                <!-- 附件 -->
                                <template v-else-if="c.type && c.type == 'file'">
                                    <RLink v-model="record[column.dataIndex]" v-if="record[column.dataIndex]"></RLink>
                                    <span v-else>-</span>
                                </template>
                                <div v-else>{{ formatterCell(record, c) }}</div>
                            </slot>
                        </template>
                    </a-table-column>
  </a-table>

此处为表格内单元格的图片放置,对其设置一个表格插槽即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1553467.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SQL-CRUD-2数据库实验

目录 第一关任务描述 相关知识 插入完整内容的行 插入选定内容的行 编程要求 测试说明 第一关代码 第二关任务描述 相关知识 删除表中的指定行 删除表中的所有行 编程要求 测试说明 第二关代码 第三关任务描述 相关知识 更新表中的指定行 编程要求 测试说明…

鸿蒙:搜索框组件Search

搜索框组件&#xff0c;适用于浏览器的搜索内容输入框等应用场景。 说明 该组件从API Version 8开始支持 子组件 无 接口 Search(options?: { value?: string, placeholder?: string, icon?: string, controller?: SearchController }) 参数: 参数名 参数类型 必…

61、服务攻防——中间件安全CVE复现K8sDockerJettyWebsphere

文章目录 K8sDockerWebSphere K8s k8s&#xff1a;简单来说&#xff0c;跟docker一样&#xff0c;是个容器系统。 k8s对外攻击面总结 常见漏洞&#xff1a;未授权访问、提权漏洞 Docker docker逃逸&#xff1a;1、由内核漏洞引起&#xff1b;2、由Docker软件设计引起&#x…

【Git】git status中文文件名编码问题解决

git status中文文件名编码问题解决 一、问题二、解决方法 一、问题 在默认配置下&#xff0c;查看文件状态&#xff0c;中文文件名在工作区状态输出&#xff0c;中文名不能正确显示&#xff0c;而是显示为八进制的字符编码。 PS D:\VS代码\Widget> git status On branch m…

TOP100-回溯(二)

4.39. 组合总和 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限制…

【计算机网络篇】数据链路层(4.2)可靠传输的实现机制

文章目录 &#x1f354;可靠传输的实现机制⭐停止 - 等待协议&#x1f5d2;️注意 &#x1f50e;停止 - 等待协议的信道利用率&#x1f5c3;️练习题 ⭐回退N帧协议&#x1f388;回退N帧协议的基本工作流程&#x1f50e;无传输差错的情况&#x1f50e;超时重传的情况&#x1f5…

GitHub开源项目权限管理-使用账号和个人令牌访问

1.打开后台账号设置 2.找到左下角的Developer settings 3.找到Personal access tokens 的 Tokens(classic) 4.选择创建新证书 5.填写证书信息 6.点击生成证书&#xff0c;复制证书并且保存起来&#xff08;血泪教训&#xff0c;证书只会在创建时显示一次&#xff0c;以后就再也…

篮球论坛系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目持续更新中..... 2024年计算机毕业论文&#xff08;设计&#xff09;学生选题参考合集推荐收藏&#xff08;包含Springboot、jsp、ssmvue等技术项目合集&#xff09; 目录 1. …

iOS UIFont-实现三方字体的下载和使用

UIFont 系列传送门 第一弹加载本地字体:iOS UIFont-新增第三方字体 第二弹加载线上字体:iOS UIFont-实现三方字体的下载和使用 前言 在上一章我们完成啦如何加载使用本地的字体。如果我们有很多的字体可供用户选择,我们当然可以全部使用本地字体加载方式,可是这样就增加了…

SpringBoot3任务处理

目录 1.异步任务 无返回值异步任务 效果 有返回值异步任务 效果 2.定时任务 效果 3.邮件任务 获取授权码 加入依赖 配置文件 纯文本邮件 效果 复杂邮件 效果 1.异步任务 Async注释&#xff1a; SpringBoot中的异步调用&#xff0c;可以写在类上或方法上&#…

如何选择指纹浏览器?盘点好用是防关联浏览器

在网络世界中&#xff0c;保护您的在线隐私和安全非常重要。反检测浏览器是专门为此诞生的工具&#xff0c;旨在通过更改浏览器指纹来帮助您做到这一点&#xff0c;它们使网站、广告商和其他人很难跟踪您的在线行为。 一、什么是反检测浏览器&#xff1f; 您是否想过网站如何检…

PCD3012五通道高功率因数LED控制芯片,集成700V高压MOSFET 低THD 外围极少元件

概述 PCD 3012B 是一款五段低 THD 、高功率因数 LED 线性恒流控制芯片&#xff0c;芯片集成了 700V 高压 MOSFET &#xff0c;采用独特创新的器件工艺技术&#xff0c;具有优越的抗雪崩击穿及浪涌能力&#xff0c;在外围无保护器件时可通过650V 雷击浪涌测试&#xff0c;内置…

实验7 内置对象response

编写代码&#xff0c;掌握request、response的用法。【参考课本4.6.2】 三、源代码以及执行结果截图&#xff1a; input.jsp <% page language"java" contentType"text/html; charsetutf-8" pageEncoding"utf-8"%> <!DOCTYPE html>…

重学SpringBoot3-SpringBoot可执行JAR的原因

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-SpringBoot可执行JAR的原因 Spring Boot可执行JAR的结构打包运行JAR 包内部结构 工作原理优点总结 Spring Boot 的一个核心特性是它的可执行 JAR&#x…

在word中显示Euclid Math One公式的问题及解决(latex公式,无需插件)

问题&#xff1a;想要在word中显示形如latex中的花体字母 网上大多解决办法是安装Euclid Math One。安装后发现单独的符号插入可行&#xff0c;但是公式中选择该字体时依然显示默认字体。 解决办法&#xff1a;插入公式后&#xff0c;勾选左上角的latex 在公式块中键入latex代码…

在宝塔面板中,为自己的云服务器安装SSL证书,为所搭建的网站启用https(主要部分攻略)

前提条件 My HTTP website is running Nginx on Debian 10&#xff08;或者11&#xff09; 时间&#xff1a;2024-3-28 16:25:52 你的网站部署在Debain 10&#xff08;或者11&#xff09;的 Nginx上 安装单域名证书&#xff08;默认&#xff09;&#xff08;非泛域名&#xf…

Tensorflow2.0笔记 - metrics做损失和准确度信息度量

本笔记主要记录metrics相关的内容&#xff0c;详细内容请参考代码注释&#xff0c;代码本身只使用了Accuracy和Mean。本节的代码基于上篇笔记FashionMnist的代码经过简单修改而来&#xff0c;上篇笔记链接如下&#xff1a; Tensorflow2.0笔记 - FashionMnist数据集训练-CSDN博…

Codeforces Round 937 (Div. 4)

A. Stair, Peak, or Neither?&#xff08;模拟&#xff09; #include<iostream> using namespace std;int main(){int t;scanf("%d", &t);int a, b, c;while(t--){scanf("%d%d%d", &a, &b, &c);if(a < b && b < c) p…

(免费分享)基于微信小程序电影院购票系统带论文

基于小程序的电影院购票管理系统【含报告】&#xff1a;前端 vue、elementui、小程序&#xff0c;后端 maven、springboot、springmvc、spring、mybatis&#xff0c;角色分为管理员、用户&#xff1b;集成小程序浏览电影&#xff0c;购票等功能于一体的系统。 目录 摘要 I Ab…

fpga 通过axi master读写PS侧DDR的仿真和上板测试

FPGA和ARM数据交互是ZYNQ系统中非常重要的内容。PS提供了供FPGA读写的AXI-HP接口用于两者的高速通信和数据交互。一般的&#xff0c;我们会采用AXI DMA的方式去传输数据&#xff0c;DMA代码基本是是C编写&#xff0c;对于FPGA开发者来说不利于维护和debug。本文提供一种手写AXI…