专栏首页python3vue引入assets下图片路径找不到问题

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

一、概述

项目目录结构

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

访问页面,效果如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue-cli静态资源处理

      vue-cli是利用webpack进行打包部署,其中静态资源的路径问题是一个比较麻烦的部分。

    用户2038589
  • 详解 Vue 目录及配置文件之 node_modules,src,static,test 目录

     node_modules 是安装 node 后用来存放用包管理工具下载安装的包的文件夹。比如 webpack 等这些工具。

    Demo_Null
  • Vue处理静态资源及public/static/assets目录的区别

    1、在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。

    德顺
  • vue引入各类ui库 原

    本身集成并没有vue的部分,我们采用的方式是把ui-css部分拿来使用,js效果自己用jquery写到methods里

    晓歌
  • 18. vue-router案例-tabBar导航

    通常body样式, 我们将其单独定义到main.css文件中. 放在assets目录下

    用户7798898
  • 快速配置webpack多入口脚手架

    当我们基于vue开发单个项目时,我们会init一个vue-cli,但当我们想在其他项目里共用这套模板时,就需要重新init一个,或者clone过来,这非常不方便...

    吴裕超
  • ueditor 在springboot 打jar运行时 找不到图片附件路径问题

    打成jar部署后,上传文件找不到正确的文件路径,因为jar 不像 tomcat 那种有明确的文件路径

    FHAdmin
  • Vue CLI 2.x搭建Vue项目

    windows  1. Node.js (>=6.x, 推荐8.x) Node官网下载 .msi 文件,按步骤下载安装即可。   安装完之后在cmd中输入 ...

    文渊同学
  • Vue CLI 2.x搭建vue,目录最全分析

    安装过nodeJs 、cnpm 后,全局安装vue-cli(以后其他项目可直接使用):

    王念博客

扫码关注云+社区

领取腾讯云代金券