Заменить ссылки на изображения в файле json на данные в кодировке base64 с помощью webpack

Мне нужно создать легко настраиваемый веб-сайт в виде одного файла. Я использую webpack 4.x

Я создал файл json с "конфигурацией"

{
  "externals": [
    { "link": "http://lynda.com", "image": "./assets/lynda.jpg" },
    { "link": "https://www.mindtools.com/community", "image": "./assets/mindtools.jpg" },
    { "link": "https://www.ted.com/talks", "image": "./assets/ted.jpg" },
    { "link": "https://stackoverflow.com", "image": "./assets/stack.jpg" }
  ]
}

Я также настроил base64-inline-loader в webpack

  // {
  //   test: /\.(jpg|jpeg|png)(\?.*)?$/,
  //   use: 'base64-inline-loader?name=[name].[ext]'
  // },
  {
    test: /\.(jpg|jpeg|png)(\?.*)?$/,
    loader: 'base64-inline-loader',
    options: {
      name: utils.assetsPath('[name].[ext]')
    }
  },

Обе конфигурации выше не работали. URL-адреса, созданные в компоненте vue на основе данных json, по-прежнему относятся к файлу, и, конечно же, эти ссылки указывают на 404 URL-адреса. Все остальные встроенные изображения для CSS и HTML обрабатываются правильно.

Я что-то делаю не так, но не знаю, что это. Любые идеи?

Как сделать HTTP-запрос в Javascript?
Как сделать HTTP-запрос в Javascript?
В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:
0
0
318
1

Ответы 1

Готово, но я не на 100% доволен этим разрешением.

Я переместил все данные из json в контроллер приложения с предложением require

data() {
    return {
      externals: [
        { link: "https://lynda.com", image: require('./assets/lynda.jpg') },
        { link: "https://www.mindtools.com/community", image: require('./assets/mindtools.jpg') },
        { link: "https://www.ted.com/talks", image: require('./assets/ted.jpg') },
        { link: "https://stackoverflow.com", image: require('./assets/stack.jpg') }
      ]
    };
}

на сайте webpack я использую классический url-loader

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

все еще ищу возможность нормальной обработки файлов json

Другие вопросы по теме