SPFx - Issues loading image from imported class

Question

I bumped into an issue when creating a SPFx app part. My objective is to have a set of HTML templates which I can swap in where certain criteria are met. These HTML templates are stored in a separate file in an exported class. The issue I'm hitting comes in where I'm using images in these templates, specifically ${require('imgName.jpg')}.

To test, I built a new SPFx project with no frameworks (with the GA build) called 'Test'. I've created two additional folders, 'classes' and 'imgs' - my folder structure is like so:

|- src
    |- webpart
        |- classes
            TestClass.ts
        |- imgs
            Test.png

Every other file is in their automatically created location and has not been changed. These tests are being done in the local workbench and are not being tested in SPO.

In the 'import section' of the the primary .ts file (with the render / property pane etc.), I've added:

import TestClass from './classes/TestClass';
`require('set-webpack-public-path!');

In addition, I've changed the render to the below:

public render(): void {
    this.domElement.innerHTML = `
      <div class="${styles.helloWorld}">
        <div class="${styles.container}">
          <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
            <div id="testDiv">this is just a test</div>
          </div>
        </div>
      </div>`;
    console.log(TestClass.templateHtml);

    let getTestDiv = document.getElementById("testDiv");
    window.onload = () => getTestDiv.innerHTML = TestClass.templateHtml;
}

In the TestClass.ts file, I've added the below:

require('set-webpack-public-path!');

export default class Test {
    public static templateHtml = `
        <div>
            </p>hi!</p>
        </div>
        <div>
            <src="${require('../../images/Test.png')}" alt="TestImg"></img>
        </div>`
}

There are no errors that the IDE (VS Code in my case) is picking up, but when gulp serve is run and the workbench fires up, I get a failed to load entry point error:

    [SPWebPartErrorCode.ScriptLoadError]:: Unable to load web part WebPart.TestWebPart.a21a32fc-bd3e-4403-916e-927b5bc7ccec,
    Error: ***Failed to load component "b07e05cc-5e75-4e16-9e97-8ad129bfbaa5" (TestWebPart).
    Original error: ***Failed to load entry point from component "b07e05cc-5e75-4e16-9e97-8ad129bfbaa5" (TestWebPart). script resources due to: {1}.
    CALLSTACK:: Error at SPWebPartError.SPError [as constructor] (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader_en-us.js:13577:26)
    at new SPWebPartError (https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:988:30)
    at Function.SPWebPartError.create (https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:1012:18)
    at https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:1884:65
    at <anonymous>

If I remove the 'require()' from the <img src="">, the web part loads along with the remainder of the template but the image returns a 404 (I believe that's expected, as it's not suffixed with the identifier so has no idea what to display).

I've done everything that I can think of to get this to work with images, from changing the file locations around for the image/TestClass.ts file, to making it into a non-static class and instantiating it then loading the template, through to making the require('') into a variable and passing that into the HTML template - I simply cannot get this to work with images.

I get the feeling that the issue might be to do with webpack, but I've not managed to figure it out. Any help with this would be very appreciated. I'm happy to share the code I'm using if that helps at all.

Answer 1

So after an extra hour of head scratching, I noticed that the require('') image path is '../images/Test.png'. My images folder was imgs. Silly mistake but learned a few things along the way:

• Ctrl + F12 brings up a dev console that I've not seen before, is it specific to SPFX?
• Errors weren't brought up in the cmd window where I was running gulp serve for some reason until after I closed it down and opened it again, so best to try that
• Check the dist and lib folders!