JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<img src="https://t1.daumcdn.net/daumtop_chanel/op/20170315064553027.png" alt="이미지1">

<br>

<button data-src="https://t1.daumcdn.net/daumtop_chanel/op/20170315064553027.png" data-alt="이미지1">이미지1</button>

<button data-src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RWfWRR?ver=3f25&q=90&m=6&h=201&w=358&b=%23FFFFFFFF&l=f&o=t&aim=true" data-alt="이미지2">이미지2</button>

<button data-src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1F988?ver=cb07&q=90&m=6&h=201&w=358&b=%23FFFFFFFF&l=f&o=t&aim=true
" data-alt="이미지3">이미지3</button>

JavaScript

$('button').on('click', function(){
  var $targetEle = $('img');
  var srcData = $(this).data('src');
  var altData = $(this).data('alt');
  
  console.log(srcData);
  $targetEle.attr({
  	src: srcData,
    alt: altData
  });
  
})