在 ngx 数据表行中渲染 Base64 图像

如何解决在 ngx 数据表行中渲染 Base64 图像

我需要在 ngx 数据表行中显示图标。我从服务器获取行并绑定到 UI 和图标,我以 base64 格式获取,我需要将其放入以下格式。

如何将各自的图标放在 ngx 数据表中各自的列中? 我该如何过滤?

这是我的观点,我从 ts 文件渲染列并通过 ngfor 在 html 中迭代。

<ngx-datatable class="material ml-0 mr-0" [rows]="rows" [columns]="columns"     [loadingIndicator]="loadingIndicator" [columnMode]="ColumnMode.force" [headerHeight]="50"
  [footerHeight]="50" rowHeight="auto" [externalPaging]="true" [count]="page.totalElements" [offset]="page.pageNumber"
  [limit]="page.size" (page)="setPage($event)" [selected]="selected" [selectionType]="SelectionType.checkbox"  [scrollbarH]="true" 
  [selectAllRowsOnPage]="false" [rowHeight]="50">
  <ngx-datatable-column
  [width]="30"
  [sortable]="false"
  [canAutoResize]="false"
  [draggable]="false"
  [resizeable]="false"
  [headerCheckboxable]="true"
  [checkboxable]="true" *ngIf ="this.data.selection"
></ngx-datatable-column>
<ngx-datatable-column  name="Actions"  [width]="100" color="accent" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false" >
  <ng-template let-row="row" ngx-datatable-cell-template>
    <button mat-icon-button [matMenuTriggerFor]="msgMenu" class="edit-row" (click)="$event.stopPropagation()" class="hidden-on-open">
      <mat-icon class="text-muted">more_vert</mat-icon>
    </button>
    <mat-menu #msgMenu="matMenu">
      <button mat-menu-item mat-sm-button  class="mr-16" (click)="openEditDialog(row)"><mat-icon color="primary">edit</mat-icon> Edit</button>
      <button mat-menu-item mat-sm-button  class="mr-16"  (click) = "openCopyDialog(row)" ><mat-icon color="info">content_copy</mat-icon> Copy</button>
      <button mat-menu-item mat-sm-button   (click) = "openDeleteDialog(row)" ><mat-icon color="warn">delete</mat-icon> Delete</button>
    </mat-menu>
   
  </ng-template>
</ngx-datatable-column>
  <ngx-datatable-column *ngFor="let col of columns" [name]="col.name" [prop]="col.prop">
  </ngx-datatable-column> here

解决方法

只需将您的 base64 url​​ 放在图像的 src 中,检查下面的代码段。

<img src="data:image/jpeg;base64,iVBORw0KGgoAAAA..." />

<img src="data:image/jpeg;base64,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" />

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
参考1 参考2 解决方案 # 点击安装源 协议选择 http:// 路径填写 mirrors.aliyun.com/centos/8.3.2011/BaseOS/x86_64/os URL类型 软件库URL 其他路径 # 版本 7 mirrors.aliyun.com/centos/7/os/x86
报错1 [root@slave1 data_mocker]# kafka-console-consumer.sh --bootstrap-server slave1:9092 --topic topic_db [2023-12-19 18:31:12,770] WARN [Consumer clie
错误1 # 重写数据 hive (edu)&gt; insert overwrite table dwd_trade_cart_add_inc &gt; select data.id, &gt; data.user_id, &gt; data.course_id, &gt; date_format(
错误1 hive (edu)&gt; insert into huanhuan values(1,&#39;haoge&#39;); Query ID = root_20240110071417_fe1517ad-3607-41f4-bdcf-d00b98ac443e Total jobs = 1
报错1:执行到如下就不执行了,没有显示Successfully registered new MBean. [root@slave1 bin]# /usr/local/software/flume-1.9.0/bin/flume-ng agent -n a1 -c /usr/local/softwa
虚拟及没有启动任何服务器查看jps会显示jps,如果没有显示任何东西 [root@slave2 ~]# jps 9647 Jps 解决方案 # 进入/tmp查看 [root@slave1 dfs]# cd /tmp [root@slave1 tmp]# ll 总用量 48 drwxr-xr-x. 2
报错1 hive&gt; show databases; OK Failed with exception java.io.IOException:java.lang.RuntimeException: Error in configuring object Time taken: 0.474 se
报错1 [root@localhost ~]# vim -bash: vim: 未找到命令 安装vim yum -y install vim* # 查看是否安装成功 [root@hadoop01 hadoop]# rpm -qa |grep vim vim-X11-7.4.629-8.el7_9.x
修改hadoop配置 vi /usr/local/software/hadoop-2.9.2/etc/hadoop/yarn-site.xml # 添加如下 &lt;configuration&gt; &lt;property&gt; &lt;name&gt;yarn.nodemanager.res