How can I refer to this external image resource from JS?

问题

I have a React app which uses webpack and sass. I am far from being an expert on any of these technologies. The app's index.scss uses a background image on the top-level html element, as follows:

html {
    ...
    background-image: url('./path/to/image/file.jpg');
    ...
}

Using the browser's dev tools I can see that webpack has moved and renamed the image file:

background-image: url(http://localhost:6006/c165f4b41cec0.jpg)

Now I want to refer to the same image resource in some JS which uses React inline styles:

const SomeComponent = ()=> (
  <div
    style={{
      ...
      backgroundImage: ??? what goes here ???
      ...
    }}
  >
    Some text here...
  </div>
);

How can I robustly refer to the same image resource from JS, regardless of what webpack does with it?

I could transfer the inline style into another scss file, but I would prefer not to as I want to keep this particular JS file self-contained.

Thanks.

回答1:

I worked it out, so I'm just answering my own question... yuk.

import jpgFile from './path/to/image/file.jpg'; // <-- add this import

const SomeComponent = ()=> (
  <div
    style={{
      ...
      backgroundImage: 'url(' + jpgFile + ')', // or `url(${jpgFile})`
      ...
    }}
  >
    Some text here...
  </div>
);

来源：https://stackoverflow.com/questions/57602564/how-can-i-refer-to-this-external-image-resource-from-js