在设置 Webpacker React 组件时，如何正确定义 css 属性(如 backgroundImage)的图像

Question

我确信这是一个非常基本的问题，我忽略了一些明显的东西。我最近才开始学习如何在 Rails 中使用 Webpacker 和 React。

在 React 组件中，如果我正在设置使用图像的 css 主题属性，您如何引用该图像？例如，

const styles = theme => ({
image: {
backgroundImage: 'url( ??? )', // what should this path be?
}
})

我搜索了很多并尝试了许多方法，包括：

通过向 Webpacker.yml 添加resolved_paths: ['app/assets/images']来访问资产管道中的图像。

将图像放入app/javascript/images，require.context('../images', true);添加到应用程序中.js并更新主题 CSSbackgroundImage: url('../images/my_image.jpg')。

将图像放入app/javascript/packs/images并更新主题 CSSbackgroundImage: url('../images/my_image.jpg')

等。

我在这里感觉很黑暗，不确定我是否正确执行此操作，或者我是否有其他问题阻止显示图像。

Answer 1

Webpack 将所有内容视为 JavaScript 模块。在基于 Webpack 的项目中引用来自 JavaScript 的图像时，您可以像导入任何其他模块一样导入它。导入的变量表示图像的 URL。对于带有Webpacker的Rails，Webpacker的配置将指示Webpack将导入的图像作为单独的文件发出。

下面是一个示例：

import React from 'react'
import myImage from '../../images/myImage.jpg'
const styles = {
backgroundImage: `url(${myImage})`,
// ...
}
export default function ({ title }) {
return (
<div style={styles}>
Hello {title}!
</div>
)
}

查看我在此处创建的演示以获取更多上下文：https://github.com/rossta/rails6-webpacker-demo/compare/example/react-image