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

「爱情、让人受尽委屈。」 2022-11-16 10:48 384阅读 0赞

# 一、概述 #

项目目录结构

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

访问页面，效果如下：

![f0c4be8dc0e7913b254feec14e007b6b.png][]

[f0c4be8dc0e7913b254feec14e007b6b.png]: /images/20221022/3d8107c0dd2549bea3cadd664cb7c7c3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，384人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue图片路径问题

Vue图片路径问题（动/静态引入：绝对路径、相对路径） DEMO实例（可快速解决问题）: 注意：绝对路径方式导入的图片需要存储在 publiic 文件夹下静态

川长思鸟来/ 2023年10月15日 15:39/ 0 赞/ 63 阅读

相关 el-image中src加载assets路径下图片使用require避免加载不到

场景 el-image中图片的数据源加载assets路径下的照片。 ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1N

比眉伴天荒/ 2023年09月30日 10:36/ 0 赞/ 7 阅读

相关 vue引入bootstrap报错找不到模块modules

参考文档：[https://segmentfault.com/a/1190000015765805][https_segmentfault.com_a_119000001576

分手后的思念是犯贱/ 2023年05月29日 13:30/ 0 赞/ 59 阅读

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

一、概述项目目录结构 ./ ├── assets │ └── logo.png └── components └─

「爱情、让人受尽委屈。」/ 2022年11月16日 10:48/ 0 赞/ 385 阅读

相关 vue图片引入问题

在一些时候我们需要在方法中判断是否显示默认的本地图片，这时图片直接在方法中写入会无法显示，建议先使用import将图片地址引入，再将该变量赋值给src对应的变量。错误：

小灰灰/ 2022年10月02日 12:55/ 0 赞/ 215 阅读

相关 Vue3---项目中引入 assets或public下的图片

引入assets下的图片(assets下的图片会被webpack处理)，css/sass等样式文件中无法使用 <img src="@/assets/xxx.pn

叁歲伎倆/ 2022年09月12日 03:57/ 0 赞/ 2421 阅读

相关 iconfont引入vue找不到文件

文件查找失败：‘iconfont.ttf?t=1631234320335’ at App.vue:7 解决方法：使用绝对路径url(’@/static/css/font/i

红太狼/ 2022年09月11日 00:16/ 0 赞/ 333 阅读

相关 vue打包assets的路径问题

首先说一下我的文件目录 ![70][] 在config文件夹下的index.js中修改 assetsPublicPath: './'同样也可以达到资源的相对引用 [70

心已赠人/ 2022年05月25日 02:55/ 0 赞/ 254 阅读

相关引入MagicIndicator找不到依赖

在高版本的Android Studio 中引入MagicIndicator，会找不到依赖项，报错：Project with path ':magicindicator' cou

た入场券/ 2022年05月16日 07:44/ 0 赞/ 399 阅读

相关 TP5 删除（unlink）图片时找不到路径问题

问题最近用TP5在搭一个小系统，系统里有上传图片的功能，既然有上传图片，就需要有删除图片的机制，由于需求的主人条件不大好，系统存储空间不大，所以当一张图片不再需要的时候

浅浅的花香味﹌/ 2022年01月21日 10:55/ 0 赞/ 459 阅读