Как прочитать URL-адрес изображения в Salesforce и отобразить изображение с помощью Salesforce

Question

Я хотел бы создать компонент salesforce, где пользователь предоставит ссылку на изображение, а компонент отобразит изображение. Поэтому я попробовал следующий компонент lightning кода

<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}" /> 

, но я получил сообщение об ошибке Access Check Failed! AttributeSet.get(): attribute 'image' of component Можете ли вы направить меня для отображения изображения?

Answer 1

Таким образом, правильный способ справиться с этим - использовать компонент aura:html. Для этого есть несколько параметров:

1. aura: id- String - ваш идентификатор, чтобы найти элементы внутри JS
2. tag- String- the 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 атрибута. Возможно, вы сможете напрямую связать элемент img, но aura:html работает очень хорошо. Надеюсь, что ответ на ваш вопрос!