Livewire でベーシック認証の画像を表示するには？

/ Laravel, Livewire / By
ショコラ
ショコラ

Livewire でベーシック認証の画像を表示するには？

今回はWEBである画像を表示したいのですが、ある一定の期間が経過すると表示をできなくするというものです。
これにはベーシック認証を使い、imgタグに画像を表示するということをやってみたいと思います。

もっさん先輩
もっさん先輩

livewire コンポーネントのmountメソッド

public function mount()
{
  parent::mount();
  :
  $this->dispatch('auth-img','#shoumeisho1','https://answorz.com/menkyosho.png','mossan','123456');
}

livewire テンプレート

<img id="shoumeisho1" width="33%">

livewire テンプレートスクリプト部分

<script>
document.addEventListener('livewire:init', () => {
  Livewire.on('auth-img', ([img,imageUrl,username,password]) => {
    $(img).attr('src','') // 初期化
    if (null == imageUrl)
      return

    var xhr = new XMLHttpRequest
    xhr.open('GET',imageUrl,true)
    xhr.responseType = 'blob'
    xhr.setRequestHeader('Authorization','Basic '+ btoa(username+':'+password))
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          $(img).attr('src',URL.createObjectURL( this.response ))
        }
        else {
          alert('画像の有効期限が切れました')
        }
      }
    }
    xhr.send()
  })
})
</script>

以上

Scroll to Top