Vue.js中SVG图片加载正常却报‘cannot find module’错误排查

嘿，我之前碰到过几乎一模一样的问题！这个错误的根源其实是Vue模板里的动态绑定语法细节，咱们一步步来搞定它：

问题原因 #

你写的<img :src=getImg(option.svgimg) />里，:src的绑定值没有用双引号包裹。Vue的模板编译器在解析这种不带引号的表达式时，会错误地把getImg识别成了全局的Image原生构造函数，而不是你组件里定义的getImg方法。这就导致require的路径变成了奇怪的./function Image() { [native code] }，进而抛出找不到模块的错误。

修复方案 #

只需要给:src的绑定表达式加上双引号就行，修改后的代码如下：

<ul class="dropdown-menu" v-if="showMenu">
  <li v-for="option in options" v-bind:key="option.id">
    <a href="javascript:void(0)" @click="updateOption(option)">
      <!-- 给:src的绑定值加上双引号 -->
      <img :src="getImg(option.svgimg)" alt="country flag" height="24" width="18" />
      {{ option.name }}
    </a>
  </li>
</ul>

额外优化建议 #

如果想避免这类模板解析的小问题，也可以提前在组件的生命周期钩子中把图片路径处理好，比如在created里预加载：

created() {
  this.options = this.options.map(option => ({
    ...option,
    imgSrc: require(`../image-assets/4x3/${option.svgimg}`)
  }))
}

然后模板里直接用:src="option.imgSrc"就可以了：

<img :src="option.imgSrc" alt="country flag" height="24" width="18" />

这样不仅能避免模板里的函数调用解析问题，还能让模板更简洁，逻辑更清晰。

内容的提问来源于stack exchange，提问作者Vergil