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

发布时间:2021-04-09 09:28:50编辑:admin阅读(183)

    一、概述

    项目目录结构

    ./
    ├── 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

     


关键字