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

Question

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

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

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

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

Answer 1

vue конвертирует ваше изображение в base64.

Answer 2

Вы пометили 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]')
      }
    }]
  }
}