在设置 Webpacker React 组件的样式时,如何为 css 属性(如 backgroundImage)正确定义图像 url?
When styling Webpacker React components, how to properly define the image url for css properties like backgroundImage?
我确定这是一个非常基本的问题,我忽略了一些明显的问题。我最近才开始学习如何在 Rails 中使用 Webpacker 和 React。
在 React 组件中,如果我设置 css 使用图像的主题属性,您如何引用该图像?例如,
const styles = theme => ({
image: {
backgroundImage: 'url( ??? )', // what should this path be?
}
})
我进行了大量搜索并尝试了多种方法,包括:
通过将 resolved_paths: ['app/assets/images']
添加到 Webpacker.yml 从资产管道访问图像。
将图像放入 app/javascript/images
,将 require.context('../images', true);
添加到 application.js 并更新主题 css backgroundImage: url('../images/my_image.jpg')
。
将图片放入 app/javascript/packs/images
并更新主题 css backgroundImage: url('../images/my_image.jpg')
和其他人。
我在这里感到一头雾水,不确定我这样做是否正确,或者我是否有其他问题阻止图像显示。
Webpack 将所有内容都视为一个 JavaScript 模块。在基于 Webpack 的项目中引用来自 JavaScript 的图像时,您可以像导入任何其他模块一样导入它。导入的变量表示图像的 url。对于 Rails 使用 Webpacker,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
我确定这是一个非常基本的问题,我忽略了一些明显的问题。我最近才开始学习如何在 Rails 中使用 Webpacker 和 React。
在 React 组件中,如果我设置 css 使用图像的主题属性,您如何引用该图像?例如,
const styles = theme => ({
image: {
backgroundImage: 'url( ??? )', // what should this path be?
}
})
我进行了大量搜索并尝试了多种方法,包括:
通过将 resolved_paths: ['app/assets/images']
添加到 Webpacker.yml 从资产管道访问图像。
将图像放入 app/javascript/images
,将 require.context('../images', true);
添加到 application.js 并更新主题 css backgroundImage: url('../images/my_image.jpg')
。
将图片放入 app/javascript/packs/images
并更新主题 css backgroundImage: url('../images/my_image.jpg')
和其他人。
我在这里感到一头雾水,不确定我这样做是否正确,或者我是否有其他问题阻止图像显示。
Webpack 将所有内容都视为一个 JavaScript 模块。在基于 Webpack 的项目中引用来自 JavaScript 的图像时,您可以像导入任何其他模块一样导入它。导入的变量表示图像的 url。对于 Rails 使用 Webpacker,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