vue-cli组件引入assets目录下的图片

方式一：

在模板中直接绑定src

<img class="bg-img" :src="zuoshangbeijing" />
...
data() {
    return {
      zuoshangbeijing: require("@/assets/images/dashboard/iocn_zuoshangbeijing.webp")
    };
  },

方式二：

在style样式中引入

background: url('~@/assets/images/dashboard/iocn_zuoshangbeijing.webp');

说明@符号的配置

在vue.config.js中

module.exports = {
  ...
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
  }
}

如果本文对你有帮助，请点个赞吧！