Bagikan melalui

Bekerja dengan Gambar di Situs Halaman Web (Razor) ASP.NET

oleh Tom FitzMacken

Artikel ini memperlihatkan kepada Anda cara menambahkan, menampilkan, dan memanipulasi gambar (mengubah ukuran, membalik, dan menambahkan marka air) di situs web ASP.NET Web Pages (Razor).

Yang akan Anda pelajari:

  • Cara menambahkan gambar ke halaman secara dinamis.
  • Cara mengizinkan pengguna mengunggah gambar.
  • Cara mengubah ukuran gambar.
  • Cara membalik atau memutar gambar.
  • Cara menambahkan cap air ke gambar.
  • Cara menggunakan gambar sebagai marka air.

Ini adalah fitur pemrograman ASP.NET yang diperkenalkan dalam artikel:

  • Pembantu WebImage .
  • Objek Path , yang menyediakan metode yang memungkinkan Anda memanipulasi jalur dan nama file.

Versi perangkat lunak yang digunakan dalam tutorial

  • Halaman Web ASP.NET (Razor) 2
  • WebMatrix 2

Tutorial ini juga berfungsi dengan WebMatrix 3.

Menambahkan Gambar ke Halaman Web Secara Dinamis

Anda dapat menambahkan gambar ke situs web Anda dan ke halaman individual saat mengembangkan situs web. Anda juga dapat mengizinkan pengguna mengunggah gambar, yang mungkin berguna untuk tugas seperti mengizinkan mereka menambahkan foto profil.

Jika gambar sudah tersedia di situs Anda dan Anda hanya ingin menampilkannya di halaman, Anda menggunakan elemen HTML <img> seperti ini:

<img src="images/Photo1.jpg" alt="Sample Photo" />

Namun, terkadang, Anda harus dapat menampilkan gambar secara dinamis — yaitu, Anda tidak tahu gambar apa yang akan ditampilkan sampai halaman berjalan.

Prosedur di bagian ini menunjukkan cara menampilkan gambar dengan cepat di mana pengguna menentukan nama file gambar dari daftar nama gambar. Mereka memilih nama gambar dari daftar drop-down, dan ketika mereka mengirimkan halaman, gambar yang mereka pilih ditampilkan.

[Cuplikan layar memperlihatkan gambar yang ditampilkan setelah dipilih dari daftar dropdown.]

  1. Di WebMatrix, buat situs web baru.

  2. Tambahkan halaman baru bernama DynamicImage.cshtml.

  3. Di folder akar situs web, tambahkan folder baru dan beri nama gambar.

  4. Tambahkan empat gambar ke folder gambar yang baru saja Anda buat. (Gambar apa pun yang Anda miliki berguna akan melakukannya, tetapi gambar tersebut harus pas ke halaman.) Ganti nama gambar Photo1.jpg, Photo2.jpg, Photo3.jpg, dan Photo4.jpg. (Anda tidak akan menggunakan Photo4.jpg dalam prosedur ini, tetapi Anda akan menggunakannya nanti di artikel.)

  5. Verifikasi bahwa empat gambar tersebut tidak ditandai sebagai baca-saja.

  6. Ganti konten yang sudah ada di halaman dengan yang berikut ini:

    @{  var imagePath= "";
    if( Request["photoChoice"] != null){
        imagePath = @"images\" + Request["photoChoice"];
   }
}
<!DOCTYPE html>
<html>
<head>
  <title>Display Image on the Fly</title>
</head>
<body>
<h1>Displaying an Image On the Fly</h1>
<form method="post" action="">
    <div>
        I want to see:
        <select name="photoChoice">
            <option value="Photo1.jpg">Photo 1</option>
            <option value="Photo2.jpg">Photo 2</option>
            <option value="Photo3.jpg">Photo 3</option>
        </select>
        &nbsp;
        <input type="submit" value="Submit" />
    </div>
    <div style="padding:10px;">
        @if(imagePath != ""){
            <img src="@imagePath" alt="Sample Image" width="300px" />
        }
    </div>
</form>
</body>
</html>

    Isi halaman memiliki daftar drop-down ( <select> elemen) yang bernama photoChoice. Daftar ini memiliki tiga opsi, dan value atribut dari setiap opsi daftar memiliki nama salah satu gambar yang Anda masukkan ke dalam folder gambar . Pada dasarnya, daftar ini memungkinkan pengguna memilih nama yang mudah diingat seperti "Foto 1", dan kemudian meneruskan nama file .jpg saat halaman dikirimkan.

    Dalam kode, Anda bisa mendapatkan pilihan pengguna (dengan kata lain, nama file gambar) dari daftar dengan membaca Request["photoChoice"]. Anda pertama kali melihat apakah ada pilihan. Jika ada, Anda membuat jalur untuk gambar yang terdiri dari nama folder untuk gambar dan nama file gambar pengguna. (Jika Anda mencoba membangun jalur tetapi tidak ada apa pun di Request["photoChoice"], Anda akan mendapatkan kesalahan.) Ini menghasilkan jalur relatif seperti ini:

    gambar/Photo1.jpg

    Jalur disimpan dalam variabel bernama imagePath yang akan Anda butuhkan nanti di halaman.

    Dalam isi, ada juga <img> elemen yang digunakan untuk menampilkan gambar yang dipilih pengguna. Atribut src tidak diatur ke nama file atau URL, seperti yang akan Anda lakukan untuk menampilkan elemen statis. Sebaliknya, ini diatur ke @imagePath, yang berarti bahwa ia mendapatkan nilainya dari jalur yang Anda tetapkan dalam kode.

    Namun, pertama kali halaman berjalan, tidak ada gambar yang ditampilkan, karena pengguna belum memilih apa pun. Ini biasanya berarti bahwa src atribut akan kosong dan gambar akan muncul sebagai "x" merah (atau apa pun yang dirender browser ketika tidak dapat menemukan gambar). Untuk mencegah hal ini, Anda menempatkan <img> elemen dalam if blok yang menguji untuk melihat apakah imagePath variabel memiliki apa pun di dalamnya. Jika pengguna membuat pilihan, imagePath berisi jalur. Jika pengguna tidak memilih gambar atau jika ini adalah pertama kalinya halaman ditampilkan, <img> elemen bahkan tidak dirender.

  7. Simpan file dan jalankan halaman di browser. (Pastikan halaman dipilih di ruang kerja File sebelum Anda menjalankannya.)

  8. Pilih gambar dari daftar drop-down lalu klik Gambar Sampel. Pastikan Anda melihat gambar yang berbeda untuk pilihan yang berbeda.

Mengunggah Gambar

Contoh sebelumnya menunjukkan kepada Anda cara menampilkan gambar secara dinamis, tetapi hanya berfungsi dengan gambar yang sudah ada di situs web Anda. Prosedur ini menunjukkan cara mengizinkan pengguna mengunggah gambar, yang kemudian ditampilkan di halaman. Dalam ASP.NET, Anda dapat memanipulasi gambar dengan cepat menggunakan pembantu WebImage , yang memiliki metode yang memungkinkan Anda membuat, memanipulasi, dan menyimpan gambar. Pembantu WebImage mendukung semua jenis file gambar web umum, termasuk .jpg, .png, dan .bmp. Sepanjang artikel ini, Anda akan menggunakan gambar.jpg , tetapi Anda dapat menggunakan salah satu jenis gambar.

[Cuplikan layar memperlihatkan halaman Unggah Gambar.]

  1. Tambahkan halaman baru dan beri nama UploadImage.cshtml.

  2. Ganti konten yang sudah ada di halaman dengan yang berikut ini:

    @{  WebImage photo = null;
    var newFileName = "";
    var imagePath = "";

    if(IsPost){
        photo = WebImage.GetImageFromRequest();
        if(photo != null){
            newFileName = Guid.NewGuid().ToString() + "_" +
                Path.GetFileName(photo.FileName);
            imagePath = @"images\" + newFileName;

            photo.Save(@"~\" + imagePath);
        }
    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Image Upload</title>
</head>
<body>
  <form action="" method="post" enctype="multipart/form-data">
    <fieldset>
      <legend> Upload Image </legend>
      <label for="Image">Image</label>
      <input type="file" name="Image" />
      <br/>
      <input type="submit" value="Upload" />
    </fieldset>
  </form>
  <h1>Uploaded Image</h1>
    @if(imagePath != ""){
    <div class="result">
        <img src="@imagePath" alt="image" />

    </div>
    }
</body>
</html>

    Isi teks memiliki <input type="file"> elemen , yang memungkinkan pengguna memilih file untuk diunggah. Saat mereka mengklik Kirim, file yang mereka pilih dikirimkan bersama dengan formulir.

    Untuk mendapatkan gambar yang diunggah, Anda menggunakan pembantu WebImage , yang memiliki semua jenis metode yang berguna untuk bekerja dengan gambar. Secara khusus, Anda menggunakan WebImage.GetImageFromRequest untuk mendapatkan gambar yang diunggah (jika ada) dan menyimpannya dalam variabel bernama photo.

    Banyak pekerjaan dalam contoh ini melibatkan mendapatkan dan mengatur nama file dan jalur. Masalahnya adalah Anda ingin mendapatkan nama (dan hanya nama) gambar yang diunggah pengguna, lalu membuat jalur baru tempat Anda akan menyimpan gambar. Karena pengguna berpotensi mengunggah beberapa gambar yang memiliki nama yang sama, Anda menggunakan sedikit kode tambahan untuk membuat nama unik dan memastikan bahwa pengguna tidak menimpa gambar yang ada.

    Jika gambar benar-benar telah diunggah (pengujian if (photo != null)), Anda mendapatkan nama gambar dari properti gambar FileName . Saat pengguna mengunggah gambar, FileName berisi nama asli pengguna, yang menyertakan jalur dari komputer pengguna. Mungkin terlihat seperti ini:

    C:\Users\Joe\Pictures\SamplePhoto1.jpg

    Namun, Anda tidak ingin semua informasi jalur itu — Anda hanya ingin nama file yang sebenarnya (SamplePhoto1.jpg). Anda dapat menghapus hanya file dari jalur dengan menggunakan Path.GetFileName metode , seperti ini:

    Path.GetFileName(photo.FileName)

    Anda kemudian membuat nama file unik baru dengan menambahkan GUID ke nama aslinya. (Untuk informasi selengkapnya tentang GUID, lihat Tentang GUID nanti di artikel ini.) Kemudian Anda membuat jalur lengkap yang dapat Anda gunakan untuk menyimpan gambar. Jalur penyimpanan terdiri dari nama file baru, folder (gambar), dan lokasi situs web saat ini.

    Catatan

    Agar kode Anda menyimpan file di folder gambar , aplikasi memerlukan izin baca-tulis untuk folder tersebut. Pada komputer pengembangan Anda, biasanya ini bukan masalah. Namun, ketika Anda menerbitkan situs Anda ke server web penyedia hosting, Anda mungkin perlu secara eksplisit mengatur izin tersebut. Jika Anda menjalankan kode ini di server penyedia hosting dan mendapatkan kesalahan, tanyakan kepada penyedia hosting untuk mengetahui cara mengatur izin tersebut.

    Terakhir, Anda meneruskan jalur simpan ke Save metode pembantu WebImage . Ini menyimpan gambar yang diunggah dengan nama barunya. Metode simpan terlihat seperti ini: photo.Save(@"~\" + imagePath). Jalur lengkap ditambahkan ke @"~\", yang merupakan lokasi situs web saat ini. (Untuk informasi tentang ~ operator, lihat Pengantar Pemrograman Web ASP.NET Menggunakan Sintaks Razor.)

    Seperti pada contoh sebelumnya, isi halaman berisi <img> elemen untuk menampilkan gambar. Jika imagePath telah diatur, <img> elemen dirender dan atributnya src diatur ke imagePath nilai .

  3. Jalankan halaman di browser.

  4. Unggah gambar dan pastikan gambar ditampilkan di halaman.

  5. Di situs Anda, buka folder gambar . Anda melihat bahwa file baru telah ditambahkan yang nama filenya terlihat seperti ini::

    45ea4527-7ddd-4965-b9ca-c6444982b342_MyPhoto.png

    Ini adalah gambar yang Anda unggah dengan GUID yang diawali dengan nama. (File Anda sendiri akan memiliki GUID yang berbeda dan mungkin dinamai sesuatu yang berbeda dari MyPhoto.png.)

Tip

Tentang GUID

GUID (ID unik global) adalah pengidentifikasi yang biasanya dirender dalam format seperti ini: 936DA01F-9ABD-4d9d-80C7-02AF85C822A8. Angka dan huruf (dari A-F) berbeda untuk setiap GUID, tetapi semuanya mengikuti pola penggunaan grup 8-4-4-4-12 karakter. (Secara teknis, GUID adalah angka 16-byte/128-bit.) Saat Anda memerlukan GUID, Anda dapat memanggil kode khusus yang menghasilkan GUID untuk Anda. Ide di balik GUID adalah bahwa antara ukuran besar angka (3,4 x 1038) dan algoritma untuk menghasilkannya, jumlah yang dihasilkan secara virtual dijamin sebagai salah satu jenis. Oleh karena itu GUID adalah cara yang baik untuk menghasilkan nama untuk hal-hal ketika Anda harus menjamin bahwa Anda tidak akan menggunakan nama yang sama dua kali. Kelemahannya, tentu saja, adalah bahwa GUID tidak terlalu ramah pengguna, sehingga mereka cenderung digunakan ketika nama hanya digunakan dalam kode.

Mengubah ukuran Gambar

Jika situs web Anda menerima gambar dari pengguna, Anda mungkin ingin mengubah ukuran gambar sebelum menampilkan atau menyimpannya. Anda dapat kembali menggunakan pembantu WebImage untuk ini.

Prosedur ini menunjukkan cara mengubah ukuran gambar yang diunggah untuk membuat gambar mini lalu menyimpan gambar mini dan gambar asli di situs web. Anda menampilkan gambar mini di halaman dan menggunakan hyperlink untuk mengalihkan pengguna ke gambar berukuran penuh.

[Cuplikan layar memperlihatkan halaman Gambar Mini.]

  1. Tambahkan halaman baru bernama Thumbnail.cshtml.

  2. Di folder gambar , buat subfolder bernama jempol.

  3. Ganti konten yang sudah ada di halaman dengan yang berikut ini:

    @{  
    WebImage photo = null;
    var newFileName = "";
    var imagePath = "";
    var imageThumbPath  = "";

    if(IsPost){
        photo = WebImage.GetImageFromRequest();
        if(photo != null){
             newFileName = Guid.NewGuid().ToString() + "_" +
                 Path.GetFileName(photo.FileName);
             imagePath = @"images\" + newFileName;
             photo.Save(@"~\" + imagePath);

            imageThumbPath = @"images\thumbs\" + newFileName;
            photo.Resize(width: 60, height: 60, preserveAspectRatio: true,
               preventEnlarge: true);
            photo.Save(@"~\" + imageThumbPath);        }
    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Resizing Image</title>
</head>
<body>
<h1>Thumbnail Image</h1>
  <form action="" method="post" enctype="multipart/form-data">
    <fieldset>
      <legend> Creating Thumbnail Image </legend>
      <label for="Image">Image</label>
      <input type="file" name="Image" />
      <br/>
      <input type="submit" value="Submit" />
    </fieldset>
  </form>
    @if(imagePath != ""){
    <div class="result">
        <img src="@imageThumbPath" alt="Thumbnail image" />
        <a href="@Html.AttributeEncode(imagePath)" target="_Self">
            View full size
        </a>
    </div>

    }
</body>
</html>

    Kode ini mirip dengan kode dari contoh sebelumnya. Perbedaannya adalah kode ini menyimpan gambar dua kali, sekali biasanya dan sekali setelah Anda membuat salinan gambar mini gambar. Pertama, Anda mendapatkan gambar yang diunggah dan menyimpannya di folder gambar . Anda kemudian membuat jalur baru untuk gambar mini. Untuk benar-benar membuat gambar mini, Anda memanggil WebImage metode pembantu Resize untuk membuat gambar 60 piksel dengan 60 piksel. Contoh menunjukkan bagaimana Anda mempertahankan rasio aspek dan bagaimana Anda dapat mencegah gambar diperbesar (jika ukuran baru benar-benar akan membuat gambar lebih besar). Gambar yang diubah ukurannya kemudian disimpan dalam subfolder jempol .

    Di akhir markup, Anda menggunakan elemen yang sama <img> dengan atribut dinamis src yang telah Anda lihat di contoh sebelumnya untuk menampilkan gambar secara kondisional. Dalam hal ini, Anda menampilkan gambar mini. Anda juga menggunakan <a> elemen untuk membuat hyperlink ke versi besar gambar. src Seperti atribut <img> elemen , Anda mengatur href atribut <a> elemen secara dinamis ke apa pun yang ada di imagePath. Untuk memastikan bahwa jalur dapat berfungsi sebagai URL, Anda meneruskan imagePath ke Html.AttributeEncode metode , yang mengonversi karakter yang dipesan di jalur ke karakter yang ok dalam URL.

  4. Jalankan halaman di browser.

  5. Unggah foto dan verifikasi bahwa gambar mini ditampilkan.

  6. Klik gambar mini untuk melihat gambar ukuran penuh.

  7. Dalam gambar dan gambar/jempol, perhatikan bahwa file baru telah ditambahkan.

Memutar dan Membalik Gambar

Pembantu WebImage juga memungkinkan Anda membalik dan memutar gambar. Prosedur ini menunjukkan cara mendapatkan gambar dari server, membalik gambar terbalik (vertikal), menyimpannya, lalu menampilkan gambar yang dibalik pada halaman. Dalam contoh ini, Anda hanya menggunakan file yang sudah Anda miliki di server (Photo2.jpg). Dalam aplikasi nyata, Anda mungkin akan membalik gambar yang namanya Anda dapatkan secara dinamis, seperti yang Anda lakukan dalam contoh sebelumnya.

[Cuplikan layar memperlihatkan halaman Balikkan Gambar Vertikal.]

  1. Tambahkan halaman baru bernama FlipImage.cshtml.

  2. Ganti konten yang sudah ada di halaman dengan yang berikut ini:

    @{  var imagePath= "";
    WebImage photo = new WebImage(@"~\Images\Photo2.jpg");
    if(photo != null){
        imagePath = @"images\Photo2.jpg";
        photo.FlipVertical();
        photo.Save(@"~\" + imagePath);
     }
}
<!DOCTYPE html>
<html>
<head>
  <title>Get Image From File</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>Flip Image Vertically</h1>
@if(imagePath != ""){
  <div class="result">
    <img src="@imagePath" alt="Image" />
  </div>
}
</body>
</html>

    Kode ini menggunakan pembantu WebImage untuk mendapatkan gambar dari server. Anda membuat jalur ke gambar menggunakan teknik yang sama dengan yang Anda gunakan dalam contoh sebelumnya untuk menyimpan gambar, dan Anda melewati jalur tersebut saat membuat gambar menggunakan WebImage:

    WebImage photo = new WebImage(@"~\Images\Photo2.jpg");

    Jika gambar ditemukan, Anda membuat jalur dan nama file baru, seperti yang Anda lakukan dalam contoh sebelumnya. Untuk membalik gambar, Anda memanggil FlipVertical metode , dan kemudian Anda menyimpan gambar lagi.

    Gambar kembali ditampilkan di halaman dengan menggunakan <img> elemen dengan atribut yang src diatur ke imagePath.

  3. Jalankan halaman di browser. Gambar untuk Photo2.jpg ditampilkan terbalik.

  4. Refresh halaman atau minta halaman lagi untuk melihat gambar dibalik sisi kanan ke atas lagi.

Untuk memutar gambar, Anda menggunakan kode yang sama, kecuali bahwa alih-alih memanggil FlipVertical atau FlipHorizontal, Anda memanggil RotateLeft atau RotateRight.

Menambahkan Cap Air ke Gambar

Saat Anda menambahkan gambar ke situs web, Anda mungkin ingin menambahkan cap air ke gambar sebelum menyimpannya atau menampilkannya di halaman. Orang sering menggunakan marka air untuk menambahkan informasi hak cipta ke gambar atau untuk mengiklankan nama bisnis mereka.

[Cuplikan layar memperlihatkan Menambahkan Cap Air ke halaman Gambar.]

  1. Tambahkan halaman baru bernama Watermark.cshtml.

  2. Ganti konten yang sudah ada di halaman dengan yang berikut ini:

    @{  var imagePath= "";
    WebImage photo = new WebImage(@"~\Images\Photo3.jpg");
    if(photo != null){
        imagePath = @"images\Photo3.jpg";
        photo.AddTextWatermark("My Watermark", fontColor:"Yellow", fontFamily:
            "Arial");
        photo.Save(@"~\" + imagePath);    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Water Mark</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>Adding a Watermark to an Image</h1>
@if(imagePath != ""){
  <div class="result">
    <img src="@imagePath" alt="Image" />
  </div>
}
</body>
</html>

    Kode ini seperti kode di halaman FlipImage.cshtml dari sebelumnya (meskipun kali ini menggunakan file Photo3.jpg ). Untuk menambahkan marka air, Anda memanggil metode pembantu WebImageAddTextWatermark sebelum menyimpan gambar. Dalam panggilan ke AddTextWatermark, Anda meneruskan teks "Marka Air Saya", atur warna font ke kuning, dan atur keluarga font ke Arial. (Meskipun tidak ditampilkan di sini, pembantu WebImage juga memungkinkan Anda menentukan tingkat keburaman, keluarga font dan ukuran font, dan posisi teks marka air.) Saat Anda menyimpan gambar, gambar tersebut tidak boleh bersifat baca-saja.

    Seperti yang telah Anda lihat sebelumnya, gambar ditampilkan di halaman dengan menggunakan <img> elemen dengan atribut src diatur ke @imagePath.

  3. Jalankan halaman di browser. Perhatikan teks "Marka Air Saya" di sudut kanan bawah gambar.

Menggunakan Gambar Sebagai Cap Air

Alih-alih menggunakan teks untuk marka air, Anda dapat menggunakan gambar lain. Orang terkadang menggunakan gambar seperti logo perusahaan sebagai marka air, atau mereka menggunakan gambar marka air alih-alih teks untuk informasi hak cipta.

[Cuplikan layar memperlihatkan halaman Menggunakan Gambar sebagai Marka Air.]

  1. Tambahkan halaman baru bernama ImageWatermark.cshtml.

  2. Tambahkan gambar ke folder gambar yang dapat Anda gunakan sebagai logo, dan ganti nama gambar MyCompanyLogo.jpg. Gambar ini harus menjadi gambar yang dapat Anda lihat dengan jelas saat diatur ke lebar 80 piksel dan tinggi 20 piksel.

  3. Ganti konten yang sudah ada di halaman dengan yang berikut ini:

    @{  var imagePath = "";
   WebImage WatermarkPhoto = new WebImage(@"~\" +
        @"\Images\MyCompanyLogo.jpg");
    WebImage photo = new WebImage(@"~\Images\Photo4.jpg");
    if(photo != null){
        imagePath = @"images\Photo4.jpg";
        photo.AddImageWatermark(WatermarkPhoto, width: 80, height: 20,
           horizontalAlign:"Center", verticalAlign:"Bottom",
           opacity:100,  padding:10);
      photo.Save(@"~\" + imagePath);
   }
}
<!DOCTYPE html>
<html>
<head>
  <title>Image Watermark</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
  <h1>Using an Image as a Watermark</h1>
  @if(imagePath != ""){
    <div class="result">
      <img src="@imagePath" alt="Image" />
    </div>
  }
</body>
</html>

    Ini adalah variasi lain pada kode dari contoh sebelumnya. Dalam hal ini, Anda memanggil AddImageWatermark untuk menambahkan gambar marka air ke gambar target (Photo3.jpg) sebelum Anda menyimpan gambar. Saat Anda memanggil AddImageWatermark, Anda mengatur lebarnya menjadi 80 piksel dan tinggi menjadi 20 piksel. Gambar MyCompanyLogo.jpg diratakan secara horizontal di tengah dan diratakan secara vertikal di bagian bawah gambar target. Tingkat keburaman diatur ke 100% dan padding diatur ke 10 piksel. Jika gambar marka air lebih besar dari gambar target, tidak ada yang akan terjadi. Jika gambar marka air lebih besar dari gambar target dan Anda mengatur padding untuk marka air gambar ke nol, marka air diabaikan.

    Seperti sebelumnya, Anda menampilkan gambar menggunakan <img> elemen dan atribut dinamis src .

  4. Jalankan halaman di browser. Perhatikan bahwa gambar marka air muncul di bagian bawah gambar utama.

Sumber Daya Tambahan

Bekerja dengan File di Situs Halaman Web ASP.NET

Pengantar Pemrograman Halaman Web ASP.NET Menggunakan Sintaks Razor