如何使用Webpacker gem访问资产

ruby-on-rails Vue.js

GO老丝LEY

2020-04-03

您能否解释一下如何从vue.js组件中的webpacker gem访问资产?例如-如何用背景图像创建div。我试过使用/ app / assets / images和/ app / javascripts / assets文件夹,但是图像仅在模板部分可用,而在样式部分不可用:(

就我而言

<template>
    <div id="home">
        <div id="intro">
            <img src="assets/cover-image-medium.png" alt="">
        </div>
    </div>
</template>

工作正常,但是

<style scoped>
    #intro {
        height: 200px;
        background: url("assets/cover-image-medium.png");
    }
</style>

不起作用:(

怎么了?

第3984篇《如何使用Webpacker gem访问资产》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
小宇宙 2020.04.03

你可以试试

background: url("/assets/cover-image-medium.png");  

代替

background: url("assets/cover-image-medium.png");
西门 2020.04.03

如果您已安装sass-railsgem,请尝试以下操作:

<style scoped>
#intro {
    height: 200px;
    background: image-url("cover-image-medium.png");
}
</style>

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android