使用element ui 写一个可以复用的图片组件，宽度100%，图片地址采用子仓库(store)管理,在父仓库中modules中引用，并且将文件的路径以注释的形式在代码中展示出来

首先，需要在子仓库(store)中创建一个图片组件Image.vue:

<template>
  <img :src="imageUrl" alt="Image">
</template>

<script>
export default {
  props: {
    imageName: {
      type: String,
      required: true
    }
  },
  computed: {
    imageUrl() {
      return require(`@/assets/images/${this.imageName}`)
    }
  }
}
</script>

接下来，在父仓库的modules中引用该组件，并且将文件的路径以注释的形式在代码中展示出来：

<template>
  <div>
    <Image imageName="example.jpg" /> <!-- @/modules/example/components/Image.vue -->
  </div>
</template>

<script>
import Image from '@/modules/example/components/Image.vue' // @/modules/example/components/Image.vue

export default {
  components: {
    Image
  }
}
</script>

需要注意的是，这里使用了require函数来动态加载图片，因此需要将图片放在assets/images文件夹中，并且在webpack配置中添加对该文件夹的解析规则：

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': resolve('src')
    },
    extensions: ['.js', '.vue', '.json'],
  },
  module: {
    rules: [
      // ...
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: 'assets/images/[name].[hash:8].[ext]'
        }
      }
    ]
  }
}

这样，就可以在父仓库中使用该图片组件，并且将文件路径以注释的形式展示出来。