After upgrading to jupyterlab2.0, pictures referenced in JavaScript do not take effect

[WangChangsongGit]

Description

Reproduce

1. In my extension, Use UI components to pass icon addresses to components in javascript like this:
   icon: require('../../assets/style/images/toolbar/data.png')

2. install the extension

Expected behavior

The icons on the UI can be displayed normally in jupyterlab 1.2.x, but when I upgrade both jupyterlab and my extensions to 2.0, the icons can not show.

The css in jupyterlab2.0 (can not show):
element.style {
background-image: url([object Module]);
}

The css in jupyterlab1.0 (can show):
element.style {
background-image: url(/static/lab/30c3271d3802174d50e946b597b430ac.png");
}

Context

• Operating System and version: Windows 10
• Browser and version: Chrome 81.0.4030.0
• JupyterLab version: 2.0.1

Troubleshoot Output

$PATH:
        c:\program files\python37\lib\site-packages\pywin32_system32
        c:\program files\python37\lib\site-packages\pywin32_system32
        D:\Program Files (x86)\NetSarang\Xshell 6\
        C:\Program Files\Huawei\jdk1.8.0_212\bin
        C:\Program Files\Huawei\jdk1.8.0_212\jre\bin
        D:\Program Files (x86)\NetSarang\Xftp 6\
        C:\Program Files\Python37\Scripts\
        C:\Program Files\Python37\
        C:\Windows
        C:\Windows\system32
        C:\Windows\System32\Wbem
        C:\Windows\System32\WindowsPowerShell\v1.0
        C:\Windows
        C:\Windows\system32
        C:\Windows\System32\Wbem
        C:\Windows\System32\WindowsPowerShell\v1.0
        C:\Windows\System32\WindowsPowerShell\v1.0\
        C:\Windows\System32\OpenSSH\
        C:\Program Files (x86)\OpenVPN\bin
        D:\Program Files\Git\cmd
        D:\Program Files\TortoiseGit\bin
        D:\Program Files (x86)\scala\bin
        D:\Program Files (x86)\sbt\bin
        D:\maven\apache-maven-3.6.0\bin
        D:\scala\bin
        D:\sbt\bin
        C:\Users\w00220009\AppData\Roaming\npm\
        C:\Program Files\Gow\bin\
        D:\Program Files\Pandoc\
        D:\gradle\gradle-5.4.1\bin
        D:\Program Files\Microsoft VS Code\bin
        C:\Program Files\Python37\share\jupyter\lab\staging\node_modules\.bin
        D:\Program Files\MiKTeX 2.9\miktex\bin\x64\
        D:\Program Files\VSCode-huawei\bin
        C:\Program Files\nodejs\
        C:\Users\w00220009\AppData\Local\Microsoft\WindowsApps
        C:\Program Files\IDM Computer Solutions\UltraEdit\
        C:\Users\w00220009\AppData\Roaming\npm
sys.path:

C:\Program Files\Python37\Scripts\jupyter-troubleshoot.EXE

c:\program files\python37\python37.zip

c:\program files\python37\DLLs

c:\program files\python37\lib

c:\program files\python37

c:\program files\python37\lib\site-packages

c:\program files\python37\lib\site-packages\win32

c:\program files\python37\lib\site-packages\win32\lib

c:\program files\python37\lib\site-packages\Pythonwin
sys.executable:

c:\program files\python37\python.exe
sys.version:

3.7.6 (tags/v3.7.6:43364a7ae0, Dec 19 2019, 00:42:30) [MSC v.1916 64 bit (AMD64)]
platform.platform():

Windows-10-10.0.17134-SP0
where jupyter:

C:\Program Files\Python37\Scripts\jupyter.exe
pip list:

Package            Version

------------------ -------

attrs              19.3.0

backcall           0.1.0

bleach             3.1.3

colorama           0.4.3

decorator          4.4.2

defusedxml         0.6.0

entrypoints        0.3

importlib-metadata 1.5.0

ipykernel          5.1.4

ipython            7.13.0

ipython-genutils   0.2.0

jedi               0.16.0

Jinja2             2.11.1

json5              0.9.3

jsonschema         3.2.0

jupyter-client     6.0.0

jupyter-core       4.6.3

jupyterlab         2.0.1

jupyterlab-server  1.0.7

MarkupSafe         1.1.1

mistune            0.8.4

nbconvert          5.6.1

nbformat           5.0.4

notebook           6.0.3

pandocfilters      1.4.2

parso              0.6.2

pickleshare        0.7.5

pip                20.0.2

prometheus-client  0.7.1

prompt-toolkit     3.0.4

Pygments           2.6.1

pyrsistent         0.15.7

python-dateutil    2.8.1

pywin32            227

pywinpty           0.5.7

pyzmq              19.0.0

Send2Trash         1.5.0

setuptools         41.2.0

six                1.14.0

terminado          0.8.3

testpath           0.4.4

tornado            6.0.4

traitlets          4.3.3

wcwidth            0.1.8

webencodings       0.5.1

zipp               3.1.0

Command Line Output

Paste the output from your command line running `jupyter lab` here, use `--debug` if possible.

Browser Output

Paste the output from your browser Javascript console here.

[WangChangsongGit]

Are there any alternatives?
My requirement is: I can reference the image files in the style directory of my project in the JavaScript of my plugin.
Because I use a third-party UI framework, I need the icon address as an input parameter

[jasongrout]

CC @telamonian

[telamonian]

@WangChangsongGit It sounds like your element is missing some of the styling props required to actually display background-image. You can try adding the jp-Icon class to your element, which in jupyterlab is associated with the following CSS:

.jp-Icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
  min-width: 16px;
  min-height: 16px;
}

[dLamSlo8]

I'm currently having that issue, but with an img tag in my extension. I tried adding the jp-Icon class, but no visible change was seen. It happened after a switch to 2.0 as well. Any help would be appreciated!

EDIT: I just tried using require().default instead of just require() per the gitter discussion and it worked! Thanks!