Webpack 如何从JS中引用此外部图像资源？

我有一个React应用程序，它使用webpack和sass。我远不是这些技术的专家。应用程序的

index.scss

在顶级html元素上使用背景图像，如下所示：

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

使用浏览器的开发工具，我可以看到webpack已移动并重命名图像文件：

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

现在我想引用一些JS中使用的相同图像资源：

const SomeComponent=（）=>(
这里有一些文字。。。
);

无论webpack如何处理，我如何从JS可靠地引用相同的图像资源

我可以将内联样式传输到另一个scss文件中，但我不希望这样做，因为我希望保持这个特定JS文件的自包含性

---

谢谢。

我算出来了，所以我只回答我自己的问题。。。旭

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>
);

import jpgFile from./path/to/image/file.jpg'；//(
这里有一些文字。。。
);

您也可以在内联样式中使用相同的样式。只需检查图像路径。我尝试了

backgroundImage:'./path/to/image/file.jpg'

和

backgroundImage:'url（./path/to/image/file.jpg）

，两者都没有被webpack替换，也没有工作，因为部署后图像不存在于原始位置…：-（你的图像在哪里？@ravibagul91，./path/to/image/file.jpg实际上，JS没有使用“内联CSS”，而是使用了“反应内联样式”，它们略有不同。我更新了问题。

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>
);