如何渲染背景网址CSS：在VueJS中修改后

我正在使用simple-webpack vuecli来实现我的网站。我有一个按钮，它具有：在修改后产生具有背景路径url的内容。如何在css中使用background-url上的require？看起来像内联样式不适用于：修改后的CSS。如何渲染背景网址CSS：在VueJS中修改后

全球SCSS

.btn-green .btn-text:after{ 
    content: ""; 
    width: 7px; 
    height: 10px; 
    background: url('/assets/img/svg/arrow-right.svg') no-repeat 0 0; 
    background-size: 100%; 
    display: inline-block; 
    margin-left: 5px; 
    padding-bottom: 11px; 
}

Vue的模板

<div class="btn-green universal-shadow"> 
    <div class="btn-text">GET STARTED</div> 
</div>

来源

2017-10-20 Abel Chun

您需要使用相对路径，否则的WebPack将其解释为实际的URL，而不是一个路径的模块它应该要求。

url('assets/img/svg/arrow-right.svg') 
    ^removed the leading/

来源

2017-10-20 07:35:07

它仍然不起作用。我发现将图像base64字符串的路径转换工作正常。但我需要一个适当的解决方案。 –

如何渲染背景网址CSS：在VueJS中修改后

回答

相关问题