使用webpack url-loader有条件地加载图像

Question

我正在Vue js项目中工作，在该项目中，我必须根据本地数据中的数组渲染表行，该数组是从后端获取一些数据而制成的。在每一行中，我必须显示一个基于返回数据的每个项目名称的图标。 我在项目和url-loader中使用了webpack来加载我的资产。

<tr>
 <td>
   <span>
    <img :src="require(`@/assets/icons/${ingredient.name}.png`)">
    <span>{{ingredient.name}}</span>
   </span>
  </td>
</tr> 

但是这里的问题是，我的Assets文件夹中可能没有所需的图像。我希望它是有条件的，如果我的assets / icon文件夹中有所需的图像，请继续进行显示。但是如果所需的图像不存在，请继续进行操作，然后让我渲染我的组件。没做什么 。 当所需的图像不存在时，我面临的是一个webpack错误：  找不到模块'./x.png'等... 在这种情况下，我的组件将无法渲染。 再次，我想要的是即使图像不存在也要渲染的组件。 我的url-loader的webpack配置是：

 {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  }

如果这是必需信息或可以提供任何帮助，则我的Webpack版本为3.6.0。 我感谢任何帮助或指导。非常感谢。