Получение случайного хэша вместо URL изображения

Question

Вот фрагмент кода.

<img :src="./assets/img/stylechip-icon.png" alt="icon">

Когда я проверил элемент, я получаю это random hash,

Почему я получаю это random hash и как это исправить?

Answer 1

Вы пометили vue, поэтому я предполагаю, что вы используете vue-cli и расширение webpack.

То, что вы видите , это URL изображения. Это URL данных.

Шаблон проекта, созданный vue-cli, включает в себя url-loader и / или img-loader, который извлекает ресурс, на который ссылается ваш исходный код, и base64 кодирует его в URL-адрес данных всякий раз, когда вы создаете. Это позволяет сохранять сетевой запрос при каждом запуске веб-приложения.

Если вы хотите отключить эту функцию, найдите правило, соответствующее вашему файлу, в файлах конфигурации вашего веб-пакета. В шаблоне vue-cli это, вероятно, в /build/webpack.base.conf.js и правило для удаления должно выглядеть примерно так:

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

Answer 2

VUE конвертировать ваше изображение в base64.