Question

我确定这是一个非常基本的问题，并且我忽略了一些显而易见的问题。我只是最近才开始学习如何在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')

和其他。

我在这里感到昏暗，不确定是否正确执行此操作，或者不确定是否存在其他阻止显示图像的问题。

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

样式化Webpacker React组件时，如何为CSS属性（例如backgroundImage）正确定义图像URL？

1 个答案: