salesforce - 如何在 Salesforce 中读取图像 URL 并使用 Salesforce 显示图像

Question

我想构建一个 salesforce 组件，用户将在其中提供图像链接并且该组件将显示图像。所以我尝试了以下代码 闪电组件

<aura:component implements="flexipage:availableForAllPageTypes" access="global" 
 controller="MyController" >
 <lightning:card title="Partner Information">
 <Div>
     <p><lightning:input aura:name="image" label ="Enter image url"  type="text"/></p>

     <br></br> 
     <img url="{!image}" />
    </Div>
    </lightning:card>

   </aura:component>

但是插入图片url后不显示图片 我也尝试过使用该选项

     <img url="{!v.image}" /> 

但我收到错误消息访问检查失败! AttributeSet.get():组件的属性'image' 你能指导我显示图像吗？

Answer 1

因此，处理此问题的正确方法是使用 aura:html 组件。您需要为此设置一些参数:

1. aura:id- String- 用​​于在 JS 中定位元素的 id
2. tag- String- html 标签
3. HTMLAttributes- Map- 无需在 .cmp 上显式设置，我们将使用 Js

<!--YourComponent.cmp-->
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global" >
    <!--Remember to define your binding attribute-->
    <aura:attribute name="image" type="String"/>
    <lightning:card title="Partner Information">
        <div class="slds-p-around_medium">
            <p>
                <!--Set you attribute as the value of the lightning:input component-->
                <lightning:input aura:name="image" 
                                 label ="Enter image url" 
                                 value="{!v.image}" 
                                 type="text" 
                                 onchange="{!c.handleUrlChange}"/>
            </p>
            <br/>
            <!--Set the aura:id so you can access it in js, use component.find to locate-->
            <aura:html aura:id="imgDiv" tag="img"/>
        </div>
    </lightning:card>
</aura:component>

//YourComponentController.js
({
    handleUrlChange : function(component, event, helper) {
        //Grab the value from the attribute or you can use event.getParam("value");
        var imageUrl = component.get("v.image");
        //Define the map, find the img tag generated by aura:html, 
        //and set the HTMLAttributes to your map
        var newMapAttributes = {"src": imageUrl};
        component.find("imgDiv").set("v.HTMLAttributes",newMapAttributes);
    }
})

您还在图像标记上使用 url 属性，而不是 src 属性。您也许可以直接绑定(bind)到 img 元素，但 aura:html 效果非常好。希望这能回答您的问题!