Vue.jsで'npm run build'した後にプロジェクトに追加した画像の参照について

Question

フロントVue.js、バックエンドDjangoでwebアプリを構築しています。
Vue.jsで本番環境用に'npm run build'した後にディレクトリに追加された画像ファイルが表示できません。

具体的には
1.vue側からアカウント作成のために会員IDとpassを入力しそのデータをdjangoの会員登録のapiに投げる
2.django側で会員情報をDBに保存し、会員IDを元に2段階認証用のQRコードを生成する(QRコードはプロジェクトのディレクトリに格納される)
3.会員登録とQRコード生成ができたらvue側がQRコードを表示するための画面に遷移する
4.vue側から(2)で生成されたQRコードを取ってきて表示
という流れです。

いざビルドして、会員登録を行ってもQRコードが表示されず困っております。ちなみに表示されていない状態からもう一度ビルドしてリロードするとQRコードが表示されるので、ビルド時に画像が含まれていないことが原因かなと思っています。この状態だと会員登録の度にビルドしなおさないといけないので、そうではなくビルド後に画像を追加してもちゃんと表示できるようにしたいです。
画像はvueファイルの<template>内でこのように参照しています。

<img :src="require(`--file_path--/img/qr_code_${this.num}.png`)">

どのうにすればこの問題を回避できるのでしょうか。皆様の知恵をお貸しください。よろしくお願いいたします。

Answer 1

The public Folder
https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder

処理の流れ的にwebpackを通過させられないため、publicフォルダーに配置して絶対パスで参照するとか、参考になりますでしょうか。

Comments

[mako_1999]

ご回答ありがとうございます。ご回答いただいた内容で解決できそうです！
ちなみにビルドを行うとdistディレクトリ内にpublic内の画像ファイルがコピーされるという感じかと思いますが、ビルド後、Django側からのQRコードの置き場所はpublicディレクトリとdistディレクトリのどちらに置けばよいのでしょうか。ご回答いただけると助かります。よろしくお願いいたします。

[退会済みユーザー]

> ちなみにビルドを行うとdistディレクトリ内にpublic内の画像ファイルがコピーされるという感じかと思いますが、
私もその認識です。

> ビルド後、Django側からのQRコードの置き場所はpublicディレクトリとdistディレクトリのどちらに置けばよいのでしょうか。
publicディレクトリはソースコードということですよね(基本的にここにQRコードは存在しないことになりますよね。QRコードはVue.jsをビルドのし直しせずに使いたいものですので)。
distディレクトリは実際の運用環境に配置するものですよね。

Django側からはdistディレクトリの方にQRコードの画像を作成するイメージになると思います。
(ビルドして運用環境のサーバーに配置すると思いますので、Django側はそのあたりも考慮する必要があるのかと思います・・すみません、サーバー構成などを把握しないまま書いています・・)

[mako_1999]

なるほど、ありがとうございます！
distディレクトリにQRコードを置いて試してみます。
結果わかりましたらご報告させてもらいます。ご回答ありがとうございます！

[退会済みユーザー]

！
解決済になっていたようですね。
運用直前になって気づいた問題だとしたら、自分だったら嫌だなと思って、気になっていました。
解決したようで良かったです。