условная загрузка изображений с помощью webpack url-loader - PullRequest
Новая
       95

условная загрузка изображений с помощью webpack url-loader

0 голосов
/ 16 февраля 2019

Я работаю над проектом Vue js, в котором мне нужно визуализировать строки таблицы на основе массива в моих локальных данных, который сделан из выборки некоторых данных из серверной части. В каждой строке я должен показатьзначок на основе имени каждого элемента возвращаемых данных.Я использую webpack в моем проекте и url-загрузчик для загрузки своих активов. 

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

, но проблема здесь в том, что в папке моих ресурсов может не быть требуемого изображения.Я хочу, чтобы это было условно, если у меня есть требуемый образ в папке с активами / значками, тогда идите и покажите его. Но если нужного изображения там не было, просто идите и дайте мне отрендерить мой компонент.ничего не делать .с чем я сталкиваюсь, когда требуемое изображение отсутствует, есть ошибка webpack, которая: Не удается найти модуль './x.png' и так далее ... и мой компонент не будет отображаться в этом случае.Опять же, я хочу, чтобы мой компонент отображался, даже если изображения там не было.моя конфигурация webpack для url-loader: 

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

моя версия webpack 3.6.0, если это требуется информация или может помочь в любом случае.Я ценю любую помощь или руководство.большое спасибо.

...