如何在ASP.NET中将一个图像复制到另一个图像？

Question

这是我Registration.cshtml页面上“我的头像”标签的图片：

我想将此图像滑块中的所选图像复制到滑块上方的较大图像。

以下是Registration.cshtml中的代码：

<div id="copiedimage">
  <img class="default-avatar" src="@Url.Content("~/Content/Images/Account/avatar.png")" alt='default-avatar' />
 </div>
        <div class="slider">
          <img class="avatar selected" src="@Url.Content("~/Content/Images/Account/avatar.png")" alt='avatar' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_dog.png")" alt='dog' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_chihuahua.png")" alt='chihuahua' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_black_cat.png")" alt='black_cat' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_kitten.png")" alt='black_cat' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_mouse.png")" alt='black_cat' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_horse.png")" alt='horse' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_pig.png")" alt='horse' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_blue_bird.png")" alt='blue_bird' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_cow.png")" alt='cow' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_green_fish.png")" alt='green_fish' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_shark.png")" alt='shark' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_crab.png")" alt='crab' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_dolphin.png")" alt='dolphin' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_octopus.png")" alt='octopus' />
          <img class="avatar" src="@Url.Content("~/Content/Images/Account/avatar_seal.png")" alt='octopus' />
        </div>

我不知道这是否重要，但我的申请是MVC5。

您需要更多关于某事的细节吗？我有这个滑块的jquery，我应该使用jquery吗？或者也许它可以用剃须刀完成？也许图像应该是按钮的形式？有什么想法吗？

Answer 1

假设所选图像是唯一具有css类selected的图像，请尝试以下操作：

＆＃13;

＆＃13;

var img1 = $('.slider .avatar.selected')[0];
var img2 = $('#copiedimage img')[0];
img2.src = img1.src;
img2.alt = img1.alt;

＆＃13;

.avatar.selected {
  border: solid 2px blue
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="copiedimage">
  Selected image:
  <img class="default-avatar" src="" alt='default-avatar' />
</div>
<br/>
<div class="slider">
  Slider:
  <img class="avatar selected" src="https://i.stack.imgur.com/G1osH.jpg?s=32&g=1" alt='user1' />
  <img class="avatar" src="https://i.stack.imgur.com/HzMxg.jpg?s=32&g=1" alt='user2' />
</div>

＆＃13;

＆＃13;

＆＃13;