【发布时间】:2020-06-09 22:34:55
【问题描述】:
我有这个项目,我想使用我在 app/javascript/images 中的某个背景图像(我所有的图像都在那里)。当我使用 在我的 html 中使用它们时,它可以完美运行。但不知何故,当我尝试这个时:
header.masthead {
padding-top: 10rem;
padding-bottom: calc(10rem - 4.5rem);
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), image-url('images/singapore.jpg');
}
它根本不加载...当我检查代码时,它说找不到模块。我怀疑这是因为当我使用 image_pack_tags 时,webpack 不会从 CSS 编译图像,尽管它是从我的 html 代码编译的。
Javascript 目录:
├── stylesheets
│ ├── application.scss
│ └── style.scss
├── packs
│ ├── application.js
│ └── script.js
└── images
└── singapore.jpg
└── ...
application.js:
const images = require.context('../images', true);
const imagePath = (name) => images(name, true);
【问题讨论】:
-
这可能不是你想要的,但是你可以使用js设置元素的背景图片stackoverflow.com/questions/28039290/…
标签: css ruby-on-rails asset-pipeline