Create a webpart with typescript / sass

Question

I created a webpart for a footer and I have to insert an image in the footer and I can't get it to display. I am using typescript and sass. It is my first webpart!

 <p class="${styles.subTitle}"><img src="logo.png" alt="">INTRANET | Tritec Intervento  </p>

y en sass:

  .subTitle {
    margin-right: 10px;
    @include ms-fontColor-white;
  }

Answer 1

If you want to reference a local image, Please take a reference of below snippet:

const logo: any = require('./assets/logo.png');

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  public render(): void {
    this.domElement.innerHTML = `
      <div class="${styles.helloWorld}">
        
        <img src="${logo}" alt="Rencore logo" width="150" style="margin: 10px 0 0 30px" />
      </div>`;
  }

For more details please refer to:

• https://blog.mastykarz.nl/correctly-reference-images-sharepoint-framework-solutions/

BR