基于vue 动态加载图片src的解决方法

下面是完整的“基于Vue动态加载图片src的解决方法”的攻略：

1. 背景

在Vue项目中，动态加载图片很常见，但如果在组件中使用v-bind:src动态绑定图片路径，由于Vue在编译时使用“静态渲染”机制，而不是重新计算DOM操作，所以后续修改src的值并不会生效。因此需要使用其他的技巧动态加载图片。

2. 解决方法

2.1 使用require

使用 require 导入图片可以统一打包，也可以动态加载，不受Vue渲染机制的限制。

在组件中使用:

<template>
  <div>
    <img :src="picUrl" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      picUrl: "",
    };
  },
  methods:{
    async loadImg(){
      this.picUrl = await require("@/assets/img/test.png");
    }
  },
  created() {
    this.loadImg();
  },
};
</script>

上述代码中，使用require导入图片，并将得到的图片路径绑定给picUrl。在组件创建过程中，调用loadImg方法，异步地加载图片路径，最终赋值给picUrl，实现了动态加载图片的功能。

2.2 使用动态组件

Vue提供了<component :is="">的方式来动态渲染组件，在渲染动态组件时，Vue会强制重新渲染DOM，这样就能使新的src有效渲染。

在组件中使用：

<template>
  <div>
    <component :is="imgComponent" />
  </div>
</template>

<script>
import ImgComponent from "@/components/ImgComponent";

export default {
  data() {
    return {
      imgComponent: ImgComponent,
    };
  },
  created() {
    this.imgComponent = {
      template: `<img :src="picUrl" />`,
      data() {
        return {
          picUrl: "@/assets/img/test.png",
        };
      },
      mounted() {
        this.picUrl = require("@/assets/img/test.png");
      },
    };
  },
};
</script>

在上述代码中，通过创建一个简单的单文件组件ImgComponent，并在组件中使用require导入图片，实现动态加载图片的功能。在实例的created钩子函数中，将ImgComponent组件中的<img>标签动态修改为绑定到picUrl属性上的图片地址，实现了动态渲染图片的功能。