前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Salesforce FileUpload(三)如何显示上传之后的图片

Salesforce FileUpload(三)如何显示上传之后的图片

原创
作者头像
repick
修改于 2022-02-09 09:14:04
修改于 2022-02-09 09:14:04
98400
代码可运行
举报
文章被收录于专栏:SalesforceSalesforce
运行总次数:0
代码可运行

fileUpLoadImageDisplayLWC.html

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
    <lightning-card title="LWC File Upload Example Dipplay" icon-name="custom:custom19">
        <lightning-input onchange={inputChange}></lightning-input>
        <template if:true={imageUrl}>
            <img src={imageUrl}/>
        </template>
    </lightning-card>
</template>

fileUpLoadImageDisplayLWC.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { LightningElement,track } from 'lwc';

export default class FileUpLoadImageDisplayLWC extends LightningElement {
  @track imageUrl;
    inputChange(e) {
        if (e.target.value)
            this.imageUrl = '/sfc/servlet.shepherd/version/download/'  + e.target.value
    }
}

fileUpLoadImageDisplayLWC.js-meta.xml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

把开发完的Lwc配置到Account详细Page

输入【ContentVersion】表中对应图片的Id

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Salesforce File(二)自定义开发FileUpload
i.首先以当前AccountId为条件,对【ContentDocumentLink】进行以下检索。
repick
2022/02/09
6920
Salesforce File(二)自定义开发FileUpload
Salesforce LWC学习(二) helloWorld程序在VSCode中的实现
上一篇我们简单的描述了一下Salesforce DX的配置以及CLI的简单功能使用,此篇主要简单描述一下LWC如何实现helloWorld以及LWC开发时应该注意的一些规范。
Zero-Zhang
2019/07/08
1.5K0
Salesforce ListViewButton URL方式打开自定义组件
listViewButtonForLwcPassedIds.js-meta.xml
repick
2023/04/15
5210
Salesforce ListViewButton URL方式打开自定义组件
Salesforce FileUpload(四) 导入静态资源并显示自定义头像框
我们在项目中,会遇到顾客详细画面,或者用户详细画面需要显示头像功能,下面使用lwc开发一个如下图的自定义组件。
repick
2022/02/10
5680
Salesforce FileUpload(四) 导入静态资源并显示自定义头像框
Salesforce LWC学习(四十) dynamic interaction 浅入浅出
Configure a Component for Dynamic Interactions in the Lightning App Builder - Salesforce Lightning Component Library
Zero-Zhang
2022/11/12
9820
Salesforce LWC学习(四十) dynamic interaction 浅入浅出
Salesforce LWC学习(三十六) Quick Action 支持选择 LWC了
背景: 我们现在项目越来越多的使用 lwc 进行了前端开发,当然我们知道lwc并不能所有的场景都支持自己玩,比如组件之间的navigation、 quick action等都需要通过aura进行操作,aura套用lwc来实现。好消息是随着salesforce的release对lwc的不断发力,越来越多的功能可以通过lwc来使用。
冬夜先生
2021/09/08
7610
Salesforce学习 CommunityCloud(八)实现自定义error页面跳转
上一篇讲了自定义LogoutPage跳转,在我们正常开发过程中还会遇到需要跳转到自定义的error画面,例如当我们在Lwc中更新某个项目,但是在当前User下,没有更新权限,这样就需要跳转到自定义的Error画面,实现方法是首先做成一个VisualforcePage,用来显示error信息或者固定文言,然后在Community的Error Page装载VisualforcePage,最后在更新处理的方法实现调整,下边是具体步骤。
repick
2021/01/25
4290
Salesforce学习 CommunityCloud(八)实现自定义error页面跳转
Salesforce 详细Page中自定义QuickAction Lightning Web Component应用
详细page中的自定义Action,调用自定义组件时,现在可以支持使用Lwc,以下是QuickAction调用Lwc的例子
repick
2022/05/23
4140
Salesforce 详细Page中自定义QuickAction Lightning Web Component应用
Salesforce学习 Lwc(二) 自定义开发ApexClass应用
使用Lwc时候,有时会遇到因为权限问题无法更新的状况,这个时候就要通过ApexClass进行更新操作,因为ApexClass可以无视权限,下边这个例子就是ApexClass与LightningWebComponent结合,实现更新画面上的项目。
repick
2020/12/12
1.1K0
Salesforce学习 Lightning(一)LightningComponentTabs的创建
Lightning标准画面上的tab,一般情况下有home和各个object,有时需要表示自定义画面,这种情况下如何实现。
repick
2020/12/17
7170
Salesforce LWC学习(五) LDS & Wire Service 实现和后台数据交互 & meta xml配置
之前的几节都是基于前台变量进行相关的操作和学习,我们在项目中不可避免的需要获取数据以及进行DML操作。之前的内容中也有提到wire注解,今天就详细的介绍一下对数据进行查询以及DML操作以及Wire Service相关的知识。
Zero-Zhang
2019/09/29
2.8K0
Salesforce LWC学习(五)  LDS & Wire Service 实现和后台数据交互 & meta xml配置
Salesforce LWC学习(三) import & export / api & track
我们使用vs code创建lwc 时,文件会默认生成包含 template作为头的html文件,包含了 import LightningElement的 js文件以及对应的.js-meta.xml文件。前一个LWC学习的文章中已经说过当浏览器渲染的时候,遇见<template>会将其渲染成<namespace-component-name>,比如 helloWorld.html引入在页面中浏览器进行渲染时,此文件的template会被渲染成<c-hello-world>。这里不知道大家是否有过疑问, import / export 是干什么用的,针对变量声明和html以及js之间的数据绑定如何实现的,这些都将会在下面有简单的描述。
Zero-Zhang
2019/09/29
1.4K0
Salesforce LWC学习(三)  import & export / api & track
Salesforce How To Refresh Page Data in Lightning Web Component(三)
使用Lwc打开一个新的浏览器窗口,当关闭窗口时也可以进行刷新操作,如下,点击加号按钮,打开登录画面,当登录成功时刷新ListView列表。
repick
2022/05/03
4640
Salesforce How To Refresh Page Data in Lightning Web Component(三)
Salesforce学习 Lwc(一) lightning-record-edit-form标签
使用lightning-record-edit-form组件创建一个表单,该表单用于添加Salesforce记录或更新对象上现有记录中的字段。
repick
2020/12/08
1.4K0
Salesforce学习 Lwc(十二)【Lightning Message Service】
前边讲过方法【this.dispatchEvent()】的用法,可以实现父子Lwc组件之间的相互调用,今天讲解Communicate Across the DOM with Lightning Message Service,使用【Lightning message service】在Lightning页面内跨DOM进行通信,可以实现在嵌入在同一Lightning页面中的Visualforce页面,Aura组件和Lightning Web组件之间进行通信,可以不用
repick
2021/01/05
1.2K0
Salesforce学习 Lwc(十二)【Lightning Message Service】
salesforce零基础学习(一百三十六)零碎知识点小总结(八)
https://developer.salesforce.com/docs/platform/lwc/guide/use-navigate-url-addressable.html
Zero-Zhang
2024/05/12
1900
salesforce零基础学习(一百三十六)零碎知识点小总结(八)
Salesforce FileUpload(六) 上传之后头像如何显示
image.png 上一篇头像上传功能之后,我们接着开发如何显示上传的头像。 首先在Apex类中取得对应的【ContentVersionId】 AccountInfoController.cls public with sharing class AccountInfoController { @AuraEnabled(Cacheable=true) public static AccountInfoWrapper getAccInfoRecord(Id recordId) {
repick
2022/02/10
8100
Salesforce FileUpload(六) 上传之后头像如何显示
Salesforce学习 Lwc(五)QuickAction 实现Aura到lwc画面的跳转
QuickAction我们都知道,salesforce提供一些自己object的数据做成,数据更新的page,也可以自己定制一些page画面,但这些只限于标准开发之内,如果想实现跳转到自定义lwc画面的情况下,应该怎么做,本篇为大家讲述。
repick
2020/12/17
1.5K0
Salesforce学习 Lwc(八)【UseSVGResources】静态资源显示图片
SVG (Scalable Vector Graphics) 是基于XML的图像格式,下边这是一个包含红色矩形,绿色圆圈和白色文字的文件示例
repick
2020/12/23
9570
Salesforce FileUpload(七)如何实现头像框四周显示进度条
Lwc提供的如下标签,可以显示类似圆形进度条,但是我们需要的是在头像的周围显示,显然利用提供的标签无法实现。
repick
2022/02/10
5650
Salesforce  FileUpload(七)如何实现头像框四周显示进度条
推荐阅读
相关推荐
Salesforce File(二)自定义开发FileUpload
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文