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>

參考鏈接里還有其他解決方案，不過我個人覺得這個更方便

參考鏈接：

入侵與刪除！ ！ ！ ！ ！ ！