I want to use a gif static resource as a loading image in a LWC.

I import it in the JS file:

import mygif from '@salesforce/resourceUrl/mygif';

and use it in the HTML file:

<img src={mygif} />

but it doesn't actually show up.

I put a debugger in connectedCallback() and typed mygif into the browser console and got Error: variable mygif has been optimized out. Is there anyway around that?


While I never got such a message, your issue (based on the shared code) is most likely the fact you are trying to use the import identifier in your markup.

You have to assign mygif to an instance variable in your component class and use this one in your template.

You can also validate it via developer tools => inspecting the dom element for your image and my assumption would be that it is missing the src attribute completely (because it tried to bind the value to an instance variable mygif which does not exist)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.