vue引入assets下图片路径找不到问题

项目目录结构

./
├──assets
│└──logo.png
└──components
└──test.vue

test.vue中的css样式，需要引用assets下的logo.png文件。

#main{
width:200px;
height:200px;
background:url('logo.png');
}

运行后报错：

ERRORFailedtocompilewith1errors15:43:10

Thisrelativemodulewasnotfound:

*./logo.pngin./node_modules/css-loader?{"sourceMap":true}!...

使用相对路径

#main{
width:200px;
height:200px;
background:url('../assets/logo.png');
}

注意：用多少个../ 取决于vue文件和assets目录之间，跨越了多少层级。

我这里只用了一个，如果你的层级比较深，需要添加多个../

完整代码如下： test.vue

<template>
<divid="main"></div>
</template>

<script>
exportdefault{
name:"test"
}
</script>

<stylescoped>
#main{
width:200px;
height:200px;
background:url('../assets/logo.png');
}
</style>

访问页面，效果如下：

原文地址：https://cloud.tencent.com/developer/article/1812718

以上是真正的电脑专家为你收集整理的vue引入assets下图片路径找不到问题的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得真正的电脑专家网站内容还不错，欢迎将真正的电脑专家推荐给好友。