切换图片URL为在线地址后Vue报Module not found错误求助

问题原因 #

require() 是Webpack的模块加载语法，仅用于加载本地项目内的资源文件（比如assets目录下的图片），它会在构建阶段解析本地文件路径并处理资源。而在线图片的URL属于外部资源，并不在Webpack的模块体系内，用require()包裹会让Webpack误以为要加载本地模块，自然找不到对应文件，从而抛出Module Not Found错误。

解决方法 #

直接返回在线图片的完整URL字符串即可，不需要使用require()：

修改后的getImage方法 #

methods: {
  getImage(image) {
    return `https://onlineImageStorage.com/${image}`;
  }
}

HTML部分保持不变 #

<img class="moduleImage" :src="getImage(module.pictureName)" :alt="module.name">

额外优化：处理图片加载失败 #

如果需要应对在线图片加载失败的情况，可以给img标签添加@error事件，替换为默认占位图：

<img 
  class="moduleImage" 
  :src="getImage(module.pictureName)" 
  :alt="module.name"
  @error="handleImageError"
>

对应的处理方法：

methods: {
  getImage(image) {
    return `https://onlineImageStorage.com/${image}`;
  },
  handleImageError(e) {
    // 替换为在线占位图地址，或本地资源的require路径
    e.target.src = require('@/assets/default-placeholder.png');
  }
}

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