Bagaimana cara mengkonfigurasi IIS untuk SVG dan pengujian web dengan Visual Studio?

14

Katakanlah saya memiliki halaman web sederhana dengan gambar svg di dalamnya:

<img src="foobar.svg" alt="not working" />

Jika saya membuat halaman ini sebagai halaman html statis dan melihatnya langsung svg ditampilkan. Jika saya mengetik alamat svg ini - ini ditampilkan.

Tetapi ketika saya menjadikan ini sebagai halaman .aspx dan meluncurkannya secara dinamis dari Visual Studio, saya mendapatkan altteks. Jika saya mengetik alamat svg ini (dari localhost, bukan sebagai file lokal) - browser mencoba mengunduhnya daripada menampilkan.

Saya sudah mendefinisikan tipe mime di IIS (untuk seluruh server - "image / svg + xml") dan memulai kembali IIS. Efek yang sama seperti sebelumnya.

Pertanyaan: apa yang harus saya lakukan lebih banyak?

Memperbarui

WireShark tidak akan berfungsi (ini dalam dokumentasi), saya juga mencoba RawCap, tetapi tidak dapat melacak koneksi saya (aneh), untungnya Fiddler bekerja:

Dari klien:

GET http://127.0.0.1:1731/svg/document_edit.svg HTTP/1.1
Host: 127.0.0.1:1731
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:10.0.1) Gecko/20100101 Firefox/10.0.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive

Jawaban dari server:

HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Date: Thu, 16 Feb 2012 11:14:38 GMT
X-AspNet-Version: 4.0.30319
Cache-Control: private
Content-Type: application/octet-stream
Content-Length: 87924
Connection: Close

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:

*** FIDDLER: RawDisplay truncated at 128 characters. Right-click to disable truncation. ***

Sebagai catatan, inilah Q&A yang berguna untuk Fiddler: /programming/826134/how-to-display-localhost-traffic-in-fiddler-while-debugging-an-asp-net-applicati

Greenoldman
sumber
Pikirkan Anda mungkin mendapatkan jawaban yang lebih baik untuk ini di SO. Singkatnya, dengan asumsi ASPX sudah berfungsi, Anda harus memancarkan SVG sebagai tipe MIME dari halaman ASPX agar browser percaya bahwa itu adalah file SVG. Anda, mungkin, mencoba memancarkan SVG secara dinamis dari halaman? Jika demikian, AFAIK jika berfungsi sebagai satu halaman, itu akan berfungsi dalam entri IMG.
TristanK
@ Kristrist, aspx tidak memancarkan "SVG sebagai tipe MIME", itu hanya berisi <img src...seperti yang ditunjukkan di atas, aspx "diterjemahkan" ke halaman html penuh, tetapi pengiriman seluruh konten (html, dan kemudian svg) dilakukan oleh IIS.
greenoldman
Saya masih tidak mengerti apa yang Anda gambarkan, tetapi saya pikir ini adalah pertanyaan pengembangan, jadi akan lebih baik jika ditanyakan pada StackOverflow.
TristanK
2
Ambil salinan Fiddler lalu lacak dua permintaan yang berbeda. Itu mungkin memberi Anda beberapa petunjuk mengapa permintaan langsung untuk gambar berperilaku berbeda dalam setiap kasus ini. Petunjuk kemungkinan besar akan ada di header yang dikembalikan. Tanpa data ini, yang bisa kita lakukan hanyalah menebak respons server Anda.
Kev
@ Macias Seperti yang dikatakan Kev, Anda harus melacak lalu lintas. Fiddler atau Wireshark tua yang polos seharusnya bisa mengambilnya.
Chris S

Jawaban:

14

Dari penelusuran Fiddler Anda, tampaknya Anda menayangkan halaman menggunakan server web Visual Studio bawaan:

Server: ASP.NET Development Server/10.0.0.0

Jika ini dilayani oleh IIS7 maka kita akan melihat:

Server: Microsoft-IIS/7.5

Server web Visual Studio built-in hanya memiliki set terbatas tipe mime yang dapat dilayaninya dan tidak memiliki pengetahuan tentang tipe mime yang Anda setel untuk IIS7. Saya menulis jawaban untuk masalah serupa di Stack Overflow beberapa waktu lalu:

Menyetel tipe MIME menggunakan ASP.NET Development Server

Server bawaan melayani .svgfile Anda sebagai:

Content-Type: application/octet-stream

Ini mungkin yang menyebabkan browser meminta untuk mengunduh.

Di Visual Studio periksa bahwa Anda menggunakan IIS Express dengan membuka properti proyek situs Anda dan memilih tab "Web" dari daftar tab vertikal:

masukkan deskripsi gambar di sini

Jika Anda belum menginstal IIS 7.5 Express, Anda bisa mendapatkannya dari sini:

http://www.microsoft.com/download/en/details.aspx?id=1038

Anda akan membutuhkan Visual Studio 2010 Paket Layanan 1 untuk mengambil keuntungan penuh:

http://support.microsoft.com/kb/983509

Dukungan IIS Express

Visual Studio 2010 SP1 memungkinkan Anda untuk menggunakan Internet Information Services (IIS) 7.5 Express sebagai server hosting lokal untuk situs web dan Proyek Aplikasi Web.

Catatan IIS 7.5 Express tidak termasuk dalam SP1, dan Anda harus mengunduhnya secara terpisah. Untuk informasi lebih lanjut, kunjungi blog berikut: http://weblogs.asp.net/scottgu/archive/2011/01/03/vs-2010-sp1-beta-and-iis-developer-express.aspx

Setelah selesai, Anda dapat menambahkan .svgtipe mime ke web.configfile aplikasi Anda :

<configuration>
   <system.webServer>
      <staticContent>
         <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      </staticContent>
   </system.webServer>
</configuration>
Kev
sumber
Terimakasih banyak. Dalam kasus saya itu berjalan agak berbeda - untuk beralih ke IIS (saya punya ISS, bukan ISSExpress) saya harus menjalankan VS dalam mode admin, setelah itu semua - saya tidak mendefinisikan svg di web.config karena saya mendefinisikan sudah ada di IIS.
greenoldman
2

Seperti disebutkan di atas, Cassini mengabaikan pengaturan ini di web.config sehingga kita harus menggunakan IIS Express sebagai gantinya (pada pengaturan proyek VS) /programming/5924647/setting-mime-types-using-the-asp- net-development-server

Untuk mendapatkan info lebih lanjut tentang cara mengkonfigurasi tipe MIME menggunakan UI admin atau menggunakan web.config untuk IIS atau IIS Express, lihat: http://4rapiddev.com/tips-and-tricks/add-mime-type-flv-mp4- in-iis-for-a-website-or-global / dan http://4rapiddev.com/tips-and-tricks/add-mime-type-flv-mp4-to-web-config-in-iis-7 /

George Birbilis
sumber
Apakah Anda menanyakan hal ini sebagai pertanyaan baru, atau secara retoris? Jika yang pertama, silakan ajukan pertanyaan baru dengan detail lengkap. Jika yang terakhir, ini mungkin harus komentar - karena itu adalah jawaban yang sangat buruk ( lihat di sini untuk alasannya )
voretaq7
direvisi dengan tautan yang lebih baik
George Birbilis
jauh lebih baik :-)
voretaq7
2

Saya telah menggunakan jawaban Kev, dengan:

  1. Menginstal IIS 8.0 Express dari Pemasang Platform Web
  2. Mengubah properti proyek untuk menggunakan IIS Express dan membuat Direktori Virtual untuknya
  3. Menambahkan konfigurasi web.config → system.webServer
<staticContent>
    <remove fileExtension=".svg" />
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
Volodymyr Kotylo
sumber
2

Solusi saya untuk ini adalah membuat httphandler saya sendiri secara lokal yang menimpa tipe konten untuk svg.

public class SvgHandler : IHttpHandler
{

    public bool IsReusable
    {
        get { return false; }
    }

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "image/svg+xml";
        context.Response.BinaryWrite(File.ReadAllBytes(context.Request.PhysicalPath));
        context.Response.End();
    }
}

dan di web.config saya menambahkan:

<httpHandlers>
  <add verb="*" path="*.svg" type="SvgHandler" />
</httpHandlers>

dengan solusi ini Anda tidak harus menggunakan IIS express, Anda bisa menggunakan server pengembangan biasa di visual studio 2010

Robin Karlsson
sumber
1
Cukup menjijikkan bahwa hal semacam ini harus terjadi ...
Jarrod Mosen
1

Saya menjalankan IIS7, dan dapat memperbaikinya dengan mengklik kanan pada server di IIS dan memilih properti. Kemudian saya mengklik tombol MIME Types .... Saya kemudian mengklik Baru. Untuk ekstensi saya mengetikkan .svg. Untuk Tipe MIME saya mengetikkan image / svg + xml. Saya kemudian disimpan adalah semua dan melakukan iisreset dari command prompt. Bekerja dengan baik.

Troy Tabor
sumber