vue引入assets下图片路径找不到问题
一、概述
项目目录结构
./
├──assets
│└──logo.png
└──components
└──test.vuetest.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下图片路径找不到问题的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得真正的电脑专家网站内容还不错，欢迎将真正的电脑专家推荐给好友。
你可能想看：