vue引入assets下图片路径找不到问题
一、概述
项目目录结构
./
├──?assets
│???└──?logo.png
└──?components
????└──?test.vuetest.vue中的css样式，需要引用assets下的logo.png文件。
#main?{
????width:?200px;
????height:?200px;
????background:?url('logo.png');
??}运行后报错：
ERROR??Failed?to?compile?with?1?errors??????????????????????????????????????????????????????????????????????????????????????????????????????????15:43:10
This?relative?module?was?not?found:
*?./logo.png?in?./node_modules/css-loader?{"sourceMap":true}!...二、解决办法
使用相对路径
#main?{
????width:?200px;
????height:?200px;
????background:?url('../assets/logo.png');
??}注意：用多少个../ 取决于vue文件和assets目录之间，跨越了多少层级。
我这里只用了一个，如果你的层级比较深，需要添加多个../
完整代码如下： test.vue
<template>
??<div?id="main"></div>
</template>
<script>
??export?default?{
????name:?"test"
??}
</script>
<style?scoped>
??#main?{
????width:?200px;
????height:?200px;
????background:?url('../assets/logo.png');
??}
</style>访问页面，效果如下：
1.png
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-04-09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录