vue引入assets下图片路径找不到问题
vue引入assets下图片路径找不到问题
py3study
发布于 2021-04-13 16:10:58
发布于 2021-04-13 16:10:58
一、概述
项目目录结构
./
├── 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 删除
评论
登录后参与评论
推荐阅读
目录