Vue 组件使用require动态加载图片错误

Question

1.问题：

未使用require，图片渲染一次后再没有变化，检查html相关embed属性的src是已经变化过了的，路径变化正确。****
使用require，抛出Module name "images/Departs/dep-7.svg" has not been loaded yet for context，图片直接不加载，控制台也报错，检查html的embed属性，发现没有渲染

2.Vue的子组件代码

Vue.component('keshi-img', {
    props: ['pname'],
    template: '<embed :src = require(getImgUrl()) >', //使用require
    created() {
        console.log(this.pname);
    },
    methods: {
        getImgUrl() {
            return "images/Departs/dep-" + this.pname + ".svg"
        }
    }
});

##Vue的父组件代码

<div class="col-md-3 text-center" v-for="dep in deps">                                            
   <div class="col-lg-12 rounded border">
       <keshi-img :pname=dep.KeShiId></keshi-img> //将唯一标识的id传递给子组件                                      
       <h4 class="text-success">{{dep.KeShiName}}</h4>                                                    
       <p><button class="btn btn-secondary" role="button" @click="KeShiDetail(dep.KeShiId)">科室详情 »</button></p>
  </div>
</div>

##3.报错
使用require的报错

观测html的embed（自定义组件未加载）

Answer 1

参考GPT和自己的思路：

根据您提供的情况，可以看出使用 require 动态加载图片时出现了模块加载错误。这可能是因为 require 方法在加载图片时需要将其打包到项目中，但是打包过程中可能没有正确引用图片，导致加载错误。为解决这个问题，建议您尝试以下方法：

1. 确认图片路径是否正确。检查图片路径是否与模块加载时使用的路径一致。

2. 将图片打包到项目中。使用 webpack 打包时，可以将图片打包为一个模块，然后在 require 方法中引用该模块。您可以通过查看 webpack 打包配置文件，确认是否将图片打包进了项目中。

3. 尝试使用 import 替代 require。在 Vue 组件中，可以使用 import 语句动态加载图片。您可以通过将 template 中的 require 替换为 import，来尝试解决加载错误。例如：

<template>
  <img :src="imageSrc" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: ""
    }
  },
  methods: {
    loadImage() {
      import(/* webpackChunkName: "image" */ "./path/to/image.png")
        .then(src => {
          this.imageSrc = src.default;
        })
        .catch(err => {
          console.error(err);
        });
    }
  },
  created() {
    this.loadImage();
  }
}
</script>

希望这些方法能够帮助您解决问题。如果还有其他问题，请随时向我提问。