function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Saumya Agarwal 23Saumya Agarwal 23 

Boat images not loading up in LWC specialist superbadge

Hi all,

I am working on the LWC Specialist Superbadge Challenges. For my component BoatTile, the Boat pictures are supposed to load up on the page. See screenshot below- 
Boat Picture Issue

This is the piece of code for that-
    get backgroundStyle() { 
      return "background-image:url(${this.boat.Picture__c})";}

Please have a look! Thanks!
AbhishekAbhishek (Salesforce Developers) 
For all the Trailhead issues please report it here,

https://trailhead.salesforce.com/help?support=home#

https://trailhead.salesforce.com/help

So that our trailhead support engineers will look into it and get back to you.

I hope you find the above information is helpful. If it does, please mark as Best Answer to help others too.

Regards,
Salesforce Support.
Deborah OrthDeborah Orth
Did you ever get a solution to this?  I am running into the same problem.  Thanks!
Chris Henson2Chris Henson2
Glad I'm not the only one having an issue! I'll check the help sites, but also wondering if there was ever a resolution on this @saumya.  
Has NahHas Nah
In your js file, you are using "" to return the style, which treats ${this.boat.Picture__c} as part of the string instead of actually interpolating the value from the boat object. What you need to do is to use template literals to actually get the value of the image.

Try the below return in backgroundStyle() instaed:  
return `background-image:url(${this.boat.Picture__c})`;

 
Liron CohenLiron Cohen
I'm not sure why it is not working using $ tag and what is the best solution, but below code works for me:
  
get backgroundStyle() { 
        return "background-image:url('" + this.boat.Picture__c + "')";
    }

 
Aruna Mulik 25Aruna Mulik 25
change get backgroundStyle() function as follow..It is working for me 
get backgroundStyle() {
    return `background-image:url(${this.boat.Picture__c})`;
  }
Anshu Gupta 36Anshu Gupta 36

Thanks @Liron Cohen, I was facing the same issue and spent a lot of time trying to resolve this but finally below is working for me:

get backgroundStyle()

{

       return "background-image:url('" + this.boat.Picture__c + "')";

}
Praseeda Menon 10Praseeda Menon 10
Below should work . ${this.boat.Picture__c} should be annotated inside double quotes.
get backgroundStyle() {
      return `background-image:url("${this.boat.Picture__c}")`; 
    }