【Javascript】画像URLを入力した瞬間に画像プレビューできるテキストエリアを作ってみた

はじめに

最近業務でjavascriptでUI実装をする機会が増え、その最中今後も使いそうな機能については備忘録をのこしておこうと思っての投稿です！
「ネット検索した画像URLをそのまま画像出力をする機能が必要だったためその実装メモです！

こんなかんじ👇

完成コード

hoge.blade.php

     // 画像URL入力
         <input type="url" id="service-infomation-image-url" oninput="serviceInfomationImagePreview()" name="image_url[]"  placeholder="画像URLを入力してください">

             <div class="item-wapper6"> //画像マウスオーバーで拡大するcss
               <div class="img-wapper6"> //画像マウスオーバーで拡大するcss
                 <span>
                   <div id="image-position" class="-ml-16 mr-80 -mt-5"></div>
                 </span>
               </div>
             </div>
     
          //Javascript
        <script type="text/javascript">
        function serviceInfomationImagePreview() {
          var url = document.getElementById("service-infomation-image-url");
          var urlValue = url.value ;
          var imagePosition = document.getElementById("image-position");
          imagePosition.innerHTML = '<img src="' + urlValue + '" class="mt-7 ml-16 w-full h-full object-center object-cover lg:w-8 lg:h-8" />';
        }
        </script>

id="image-position”のタグの配下領域にこのimgタグをセット。
textareaタグに入力した値がこの　このimgの値に動的にセットさせる。
　この処理のトリガーをinputタグに入力したタイミングにするため
oninput="serviceInfomationImagePreview()とします。
　こうすることで入力した時点でurlの画像が即時描画という流れです！

hoge.css

.item-wapper img:hover {
    transform: scale(3);
    transition-duration: 0.3s;
    margin:0 0 0 30px;
}
 
.item-wapper img{
    transition-duration: 0.3s;
}

画像マウスオーバーで拡大するcss