Background-image path problem in vue-cli

I write the style in the calculation properties in the components of the project. I want to set the background-image of the style dynamically, but I encounter some problems in the process. How can I solve

 data () {
    return {
      tab_active: "ma",
      bgUrl: "@/assets/images/stamps/icon-auditing.png"
    }
  },
  computed: {
    imgStyle () {
      if (this.bgUrl) {
        var img = require(this.bgUrl) //this.bgUrl"@/assets/images/stamps/icon-auditing.png" 
        var url = `url(${img})` 
        console.log(url)
        return {
          "background-image": url,
          "background-position": "center center",
          "background-size": "auto 100%",
          "background-repeat": "no-repeat"
        }
      }
    },
 }   

the error is as follows
clipboard.png

the problem has been solved. When accessing resources under the static folder, use the absolute path / static, that is, point to the folder reference without require direct background-image: url ("address")

.

so why not write it in css?


Hello, landlord! If these images are placed locally, you can put them all in the public folder, where the resources are not processed by webpack. So the image path is fixed, and when needed, just change a different file name.

< hr >

if it is helpful, please click to adopt it, thank you ~

Menu