Веб-пакет vue.js и статические изображения (без сервера разработки vuecli и nodejs)

Question

У меня есть отдельный файл vue.js, где я бы хотел сослаться на изображение в теге src.

Примерно так:

 <img class="mr-4" v-if="item.picture_file" v-bind:src="item.picture_file">
 <img class="mr-4" v-else src="./idavatar.png">

Я читал о загрузчике файлов в веб-пакете. Поэтому я добавил это в свой конфигурационный файл webpack.

{
    test: /\.(png|svg|jpg|gif)$/,
    use: [ 
      {
        loader: 'file-loader',
        options: {
          emitFile: true,
        },
      }
    ]
  }

Если я помещаю файл изображения в каталог ввода, он обрабатывается, а затем выводится в каталог вывода. Как и другие файлы js.

Но тогда, при просмотре веб-страницы:

Я не пользуюсь сервером vuecli или npm dev. Я использую Django и встраиваю приложение vuejs в шаблон.

Большинство примеров, которые я прочитал, объясняют, что это должно быть выведено в каталог ресурсов, который, я думаю, подается через сервер npm dev.

Как я мог наконец подать этот файл?

Может быть, есть способ встроить его в сборку? Я поиграл с опцией emit, надеясь, что она будет объединена с main.js в / dist ... но нет. Он просто не создан на диске.

Спасибо за чтение!

Answer 1

Кстати, я решил свою проблему простым взломом.

Я заглянул в браузер с некоторыми источниками моей страницы просмотра и заметил путь к другим классическим статическим ресурсам django.

Это должно быть что-то вроде: /static/<name-of-the-app>/img

А потом вставляется в мой компонент:

<img class="mr-4" v-if="item.picture_file" v-bind:src="item.picture_file">
<img class="mr-4" v-else src="/static/<name-of-the-app>/img/default-avatar.png">

Так что больше не нужно настраивать веб-пакеты, просто используя статическое обслуживание файлов Django.

Answer 2

Я бы предложил использовать Django Webpack loader , так как вы используете django и webpack.