vue-cli eslint: Module not found: Error: Can't resolve '/assets/images/background.jpg&#039-CodePudding

I am pretty new with eslint/prettier, and I want to use it in my current project. I've got hundrends errors, but I have this specific error which I can't find a solution.

To be sure I created a fresh Vue CLI app and eslint seems working. But as soon as I use an image in the style tag I have this error:

Module not found: Error: Can't resolve '/assets/images/background.jpg'

I tried for hours to

HelloWorld.vue:

<template>
  <div >
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
  background-image: url("/assets/images/background.jpg");
}
</style>

package.json:

{
  "name": "vue-cli-eslint-prettier",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.54.0",
    "sass-loader": "^13.0.2",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

jsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "jsx": "preserve",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

I'm stuck on this for hours, any help is welcome!

CodePudding user response：

It's hard to give a solution without seeing the full file structure. But from experience, the issue comes from the path. You might to change it to "../assets/images/background.jpg", so your css would look like this:

background-image: url("../assets/images/background.jpg");