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

发布时间：2021-04-09 09:28:50编辑：admin阅读（3939）

    一、概述

    项目目录结构

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

     

    test.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

     


关键字：

上一篇： vue 数组对象更新

下一篇： vue富文本编辑器tinymce