はじめに
Vue開発をCDNで行なっている時に動的にプロジェクト内の画像のパスを動的に変更しようして苦労したのでその対処法を今回は紹介します。
CLIなどで開発をしている場合はrequireなどを用いることでimgタグなどの動的なパスの変更に対応することができます。
しかし、プロトタイプ開発やPCのセキュリティなどの問題からCLI開発ができない場合にはこのrequireが使えません。そこで今回は力技ではありますが、この問題の対象方を紹介します。
問題のコード
<img v-for="test in 10" :src="'dir1/dir2/' + test + '.jpg'">上記のコードではv-forでループ表示をしながらその際に作成したキーをパスに含めた状態で画像を表示するものになっています。
これを表示するためには別途パスを生成するメソッドを作成してそこでrequireを用いる必要があります。
対処法
全体の流れとしては以下の通りです。
- srcに何も含まれていないimgタグをループで生成
- 生成すると同時のトリガーでsrcの値のみをdocument.getElementById()で変更する
はじめに次のコードでsrcに何も含まれていないimgタグを生成します。
ここで重要なのはそれぞれのループで生成されるimgタグにループ時のkeyなど利用した一意なidをを設定することです。
<img v-for="test in 10" :id="'img' + test" src="">javascriptには次のコードでタグの属性などを変更させることができます。今回はこの機能を使ってsrc属性を変更することで動的パス変更を実現します。
document.getElementById('変更要素のID').src='変更後のパス'上記のコードをループの最後やボタンなどでトリガーとして発火させることで動的なパス変更が可能になります。
おわりに
今回はCDNでrequireを使わずに動的に画像のパスを変更する方法を紹介しました。
本サイトでは今後もVueなどの記事を更新していきますので、今回の記事を見ていいねと思った方はぜひお気に入り登録お願いします！
それではお疲れ様でした！