vue cli 3 –在样式标签中使用背景图片 [英] vue cli 3 – use background image in style tag
问题描述
我想使用组件之一中我的Assets文件夹中的svg图像作为背景图像.这是我的组件的示例:
I want to use a svg image from my assets folder in one of my components as a background-image. Here is an example of my component:
<template>
<div class="container"></div>
</template>
<script>
export default {
name: 'component'
}
</script>
<style scoped lang="scss">
.container {
height: 40px;
width: 40px;
background-image: url('@/assets/image.svg');
}
</style>
但是图像没有显示.路径正确.我的错误在哪里? 感谢您的帮助.
But the image doesn't show. The Path is correct. Where is my mistake? Thanks for your help.
推荐答案
注释中突出显示的 Max Martynov ,您应使用url('~@/assets/image.svg')
.
As Max Martynov, highlighted in the comments, you should use url('~@/assets/image.svg')
.
Webpack在解决资产时有一些特定规则 > 1] .
Webpack has some specific rules when resolving assets[1].
为了解析别名(@
),在您使用时,强制Webpack将请求作为模块请求进行处理.使用前缀~
会强制webpack将请求视为模块请求,类似于require('some-module/image.svg')
.
In order to resolve an alias (@
), as you are using, it is mandatory webpack handles the request as a module request. Using the prefix ~
enforces webpack to treat the request as a module request, similar to require('some-module/image.svg')
.
这篇关于vue cli 3 –在样式标签中使用背景图片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!