vue项目中，使用require动态加载本地图片报错找不到模块

vue项目中，使用动态加载本地图片

记录工作中遇到的问题：vue中使用(path)加载动态路径报错

    <ul class="menu-list">
      <li
        v-for="(item, index) of menuList"
        :key="index"
        :class="['menu-item', activeIndex === index ? 'menu-item-active' : '']"
        @click="handleItemClick(item)"
      >
        <!-- <img :src="require('_img/water-source/menu.png')" alt=""> -->
        <img :src="require(item.src)" alt /> // 报错找不到该模块
        <!-- <img :src="require('_img/' + item.src)" alt=""> -->
        <span>{{ item.title }}{{item.icon}}</span>
      </li>
    </ul>

原因：我想过是否是路径问题，但是直接可以访问（_img/water-/menu.png），自己也想不通，但是浏览了网上的帖子终于找到了问题所在互联网：是预编译打包工具，无法预测未知的变量路径，不能是纯变量路径

解决方案; (path) ，路径至少由三部分组成，目录+文件名+后缀

目录 => 了解从哪里开始搜索

=> 文件后缀，必须添加，否则会报错

文件名 => 可用变量表示

use value.svg = ('@//' + item.svg ) // 变量不能完全使用，前置地址必须是静态地址，否则会报错

完美解决方案！

    <ul class="menu-list">
      <li
        v-for="(item, index) of menuList"
        :key="index"
        :class="['menu-item', activeIndex === index ? 'menu-item-active' : '']"
        @click="handleItemClick(item)"
      >
        <!-- <img :src="require('_img/water-source/menu.png')" alt=""> -->
		<img :src="require('_img/' + item.src)" alt="">
        <span>{{ item.title }}{{item.icon}}</span>
      </li>
    </ul>

参考链接里还有其他解决方案，不过我个人觉得这个更方便

参考链接：

入侵与删除！ ！ ！ ！ ！ ！