vue引用assets里的图片笔记

vue引用assets里的图片笔记

（１）样式中引用：url(“~@/assets/images/already-circle.png”)
eg:

::v-deep .el-checkbox__inner .is-checked {
  // 选中的 checkbox 样式
  background: url("~@/assets/images/already-circle.png");
  background-size: contain;
  border: none;
  border-radius: none;
  width: 16px;
  height: 16px;
}

（２）元素上引用: require(@/assets/images/flow/${this.nowFlow}.jpg),需要路径前加上 require
eg:

 <div class="demo-image__error">
      <el-drawer
        title="流程图"
        :size="'50%'"
        :visible.sync="drawer"
        :modal="false"
      >
        <el-image :src="src" fit="contain"></el-image>
      </el-drawer>
    </div>
    // 计算属性里写src
    src() {
      if (this.nowFlow) {
        const imgUrl = require(`@/assets/images/flow/${this.nowFlow}.jpg`);
        if (imgUrl) {
          return require(`@/assets/images/flow/${this.nowFlow}.jpg`);
        } else {
          return require(`@/assets/images/flow/fail.png`);
        }
      } else if (this.nowFlow === 0) {
        return require(`@/assets/images/flow/0.jpg`);
      } else {
        return require(`@/assets/images/flow/fail.png`);
      }
    },