How do I reference an image which is included inside clientsideassets? I was successful in showing the image when I use below option when embedding require inside the img src.: But issue is when onclick jquery is trying to change the src attribute.

<img  id="ChatopenerId" src={require('../../assets/SnowChatOpen.png')} style={{width:'50px'}}/>
var x = document.getElementById("chatWindow");
    if (x.style.display === "none") {
    jQuery("#ChatopenerId").attr('src', 'https://localhost:4321/dist/snowchatclose_6d3b19b01f2c47584b87e20ad66d7eb9.png');
      x.style.display = "block";
    } else {
    jQuery("#ChatopenerId").attr('src', 'https://localhost:4321/dist/snowchatopen_e08731b7308f6ec26ab4090eb0318b14.png');
      x.style.display = "none";

Its working fine in local host when debugging, but since Spfx 1.4 onwards includes all the assets inside the package automatically, I am able to see them inside the package. But how do I refer those inside the jquery?

jQuery("#ChatopenerId").attr('src', '../../assets/SnowChatOpen.png'); jQuery("#ChatopenerId").attr('src','require('../../assets/SnowChatOpen.png')'); jQuery("#ChatopenerId").attr('src','sharepoint\solution\debug\ClientSideAssets\snowchatopen_e08731b7308f6ec26ab4090eb0318b14.png');

const chatopen:any=require('../../assets/SnowChatOpen.png');
const chatclose:any=require('../../assets/SnowChatClose.png');


Original URL when checked in network debug console: https://localhost:4321/dist/snowchatopen_e08731b7308f6ec26ab4090eb0318b14.png https://mydomain.sharepoint.com/sites/appcatalog/ClientSideAssets/08f139bd-0000-0000-0000-edaabb91f33d/snowchatopen_000031b7308f6ec0000090eb0318b14.png


1 Answer 1


If the URL is not an absolute path(without https/http), SharePoint will automatically fill in the URL.
You could save your pictures in SharePoint library directly.And add the relative or absolute path of the image in SharePoint to the code.

My site url is:https://contoso.sharepoint.com/sites/dev
Test result:
enter image description here enter image description here enter image description here

More reference: URLs and tokens in SharePoint

  • Thanks for the answer. But why do I need to add them to some library when they are already in app catalog.
    – ssspfx
    Oct 14, 2020 at 12:03
  • You can read this article:blog.mastykarz.nl/…
    – Amos
    Oct 15, 2020 at 5:44
  • Thanks @amos_MSFT, I already read that. It says only regarding adding the images and adding require('../image.png'). It is working in html but I need to implement hide/show inside jQuery.
    – ssspfx
    Oct 15, 2020 at 13:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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