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

记录一下工作中遇到的问题：vue中使用require(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>

原因：思考过是不是路径问题，但是直接require（_img/water-source/menu.png）是可以访问的。自己思考不出个虽然，上网翻阅帖子后终于找到问题所在 ： webpack本身是一个预编译的打包工具，无法预测未知变量路径 不能require纯变量路径

解决方法; require(path) ,path 至少要有三部分组成, 目录+文件名+后缀
目录 => webpack 才知道从哪里开始查找
后缀 => 文件后缀，必须要加上，不然会报错
文件名 => 可用变量表示
使用value.svg = require(’@/assets/’ + 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>

参考的链接里面还有其他解决方法，不过个人感觉这种比较方便

参考链接: http://www.luyixian.cn/news_show_271943.aspx.

侵删！！！！！！