CODEWITHSUNDEEP
salesforce
Sonia
Sonia

Reputation: 482

How do I read image URL in Salesforce & display the image using Salesforce

I would like to build a salesforce component where user will provide image link & the component will display the image. So I tried following code lightning component

<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>

But it's not displaying the image after inserting the image url I also tried with the option 

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

but I got the error message Access Check Failed! AttributeSet.get(): attribute 'image' of component Can you guide me to display the image?

Upvotes: 2

Views: 5948

Answers (1)

indiana.jones
indiana.jones

Reputation: 68

So the proper way to handle this would be by using the aura:html component. There are a few parameters you would set for this:

  1. aura:id- String- your id to locate the elements within JS
  2. tag- String- the html tag
  3. HTMLAttributes- Map- No need to set this explicitly on the .cmp, we'll use 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);
    }
})

You are also using the url attribute on your image tag instead of the src attribute. You may be able to directly bind to the img element, but aura:html works really well. Hope that answers your question!

Upvotes: 2

Related Questions