vue 图片加载及报错解决

一、图片路径固定

直接在 img 标签中的 src 中填入相对连接

  <div class="choose-icon">
    <img src="@/assets/images/login_bg2.jpg" alt="" style="width: 100px; height: 100px" />
  </div>

二、图片路径动态导入

图片路劲使用参数导入时直接使用，直接使用会报错，应该使用动态导入的方式，借助 import 或 require​​

2.1 在 ES6 模块中，使用 import 导入

<template>
  <div class="choose-icon">
    <img :src="src" alt="" style="width: 100px; height: 100px" />
  </div>
</template>

<script lang="ts">
import imgSrc from "@/assets/images/login_bg2.jpg";

export default {
  setup() {
    const src = imgSrc;
    return {
      src,
    };
  },
};
</script>

2.2 在 CommonJS 模块中，使用 require 导入

<template>
  <div class="choose-icon">
    <img :src="src" alt="" style="width: 100px; height: 100px" />
  </div>
</template>

<script lang="ts">
export default {
  setup() {
    const src = require("@/assets/images/login_bg2.jpg")

    return {
      src,
    };
  },
};
</script>