Vue动态设置img的src不生效的问题

原因分析

在vue项目中动态设置img的src时，图片会加载失败。我们可以先看个例子。

<template>
  <div>
    <h1>动态设置图片</h1>
    <div>
      <h5>图片一</h5>
      <img
        :src="
          logoFlag === 'vue'
            ? '../assets/vue-logo.png'
            : '../assets/react-logo.png'
        "
      />
      <div>
        <button @click="changeLogo">切换</button>
      </div>
      <h5>图片二</h5>
      <img :src="imgUrl" />
    </div>
  </div>
</template>
<script>
export default {
  name: "ImgTest",
  data() {
    return {
      logoFlag: "vue",
      imgUrl: "../assets/vue-logo.png",
    };
  },
  methods: {
    changeLogo() {
      this.logoFlag = this.logoFlag === "vue" ? "react" : "vue";
    },
  },
};
</script>
<style scoped>