1

I am trying to achieve dynamic styling for a div in lightning using expression syntax and back-ground image but i am not able to load my image. how ever, if i point it with the below syntax

background-image:url(/resource/Houseboats/houseboat2.png)

I am able to see the image saved in static resource, as below.

Boats Rendered

Any suggestions on how to write the correct syntax.

I tried the following syntax, nothing seems to load the image correct, i here by attach the network tabs response and status, no errors in the console. All the requests got 200 status except one which says pending please find that below. I am new to debugging networks tab, any suggestions on where exactly to look to debug this kind of errors is welcome.

 <div style="{!'background-image:'+v.boat.Picture__c}" class="innertile">

 <div style="{!'background-image:'+'url(v.boat.Picture__c)'}" 
 class="innerTile"/>

enter image description here

To Reproduce this issue feel free to load any zip file a test image in static resource and try to save the resources path( static resource) in a field for example(resources/catzip/cat,jpeg) in any object and try to render it as background-image in a div tag.

FYI

I am able to retrieve correct values from fields, as you can see the image above has correct names for each boat. I even tried to display {v.boat.Picture__c} i am able to get the values stored in the field.

Improve this question
7
  • Why is it not working? Usually you are able to tell by checking your browsers network tab. Please update your post with further details
    – glls
    Commented Nov 16, 2017 at 22:20
  • @glls below is my entire code . Can you guide me where exactly i need to go in the networks tab. if i try the same style with general background-image:url('resources/zipfilename/image.PNg) . I am even able to render the dynamic picture value correct i testes that too.
    – ak_1
    Commented Nov 16, 2017 at 22:26
  • Not working is not a problem description, if you can’t tell us what is not working, it’s kind of hard to help you
    – glls
    Commented Nov 16, 2017 at 22:31
  • I cant see any thing in the console to debug, i am not able to exactly find out whats going on wrong with the syntax with dynamic value rendering in inline styles.
    – ak_1
    Commented Nov 16, 2017 at 22:38
  • check the network tab, not the console tab.
    – glls
    Commented Nov 16, 2017 at 23:07

1 Answer 1

Reset to default
3

JavaScript is cAsE-sEnSiTiVe. As such, your code should read:

<div style="{!'background-image:url('+v.boat.Picture__c+')'}" class="innertile">

Everything in Lightning is this way. You must pay attention to the capitalization of everything you type in carefully.

This includes expressions, CSS, function names, variables, component names and event names, namespaces, and anything else I haven't already mentioned.

Improve this answer
7
  • i tried to follow the case sensitive, this didn't help me to solve this issue.
    – ak_1
    Commented Nov 16, 2017 at 23:28
  • @ak_1 Is this code in an aura:iterator, by chance? You may also have the wrong value provider.
    – sfdcfox ♦
    Commented Nov 16, 2017 at 23:37
  • i am able to get the Picture__c field values for different records correct. yes, it is in aura iterator but i am able to get the correct values from there as you can see the name value for different boats are rendered correct.
    – ak_1
    Commented Nov 16, 2017 at 23:41
  • i updated my question with link to the code please find them above.
    – ak_1
    Commented Nov 16, 2017 at 23:54
  • another update is the field from which the static image is loading is field type of url for which even in the Lightning Experience of that record i need to give open permission before it takes to the new tab. So, i wonder if i need to do something pragmatically to avoid this permission?
    – ak_1
    Commented Nov 17, 2017 at 3:32

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .