Динамическая вставка изображения с помощью JavaScript не работает с изображениями, которые перенаправляют 302

Question

Я динамически вставляю изображение в документ HTML, используя jQuery. Вот код:

var image_url = "http://www.kottke.org/plus/misc/images/castro-pitching.jpg";
var $image = $('<img src="'+image_url+'" width="50" height="50" />');
$('body').prepend($image);

Обратите внимание, что изображение http://www.kottke.org/plus/misc/images/castro-pitching.jpg на самом деле является перенаправлением 302 на http://kottkegae.appspot.com/images/castro-pitching.jpg.

Если в браузере перейти к исходному изображению, оно работает нормально. Если бы вы загружали HTML-страницу с этим изображением в теге img, она бы нормально загружалась.

Однако, если вы вставите его динамически, используя jQuery (или, если уж на то пошло, JavaScript), браузер не покажет 302-изображение.

Если вы показываете перенаправленное изображение, оно будет работать нормально.

var image_url = "http://kottkegae.appspot.com/images/castro-pitching.jpg";
var $image2 = $('<img src="'+image_url+'" width="50" height="50" />');
$('body').prepend($image2);

Это безумие, верно? Что дает и как я могу заставить изображение загружаться при динамической вставке?

Answer 1

Оказывается, причина того, что это работает в Firebug, заключается в том, что веб-сайт препятствовал хотлинкингу. Поэтому принудительная загрузка изображения в консоли работала нормально, но хотлинкинг не работал. Браузер правильно перенаправляет 302, даже для изображений. Трудно отлаживать, потому что он хорошо работал при отладке. Argh.

Answer 2

Прямое назначение URL-адреса изображения не сработает, вы должны создать первый объект изображения в javascript, см. Ниже:

var imgObj = new Image();
imgObj = " ---------- your path goes here----------";

, а затем назначьте свойство imgObj.src тегу динамического изображения в jquery

Answer 3

Прежде всего, мой ответ будет работать только в том случае, если вы используете ASP.NET (C #), но его можно легко перенести на VB.NET, PHP или что-то подобное.

Если вы загрузите изображение в javascript, оно будет выглядеть как мертвый URL-адрес и выдаст ошибку при попытке загрузить его.

Я создал страницу, которая получает URL-адрес изображения в строке запроса, читает изображение и выводит ответ.

WebForm.aspx

<script type="text/javascript">
    $(document).ready(function () {
        var image_url = "http://www.kottke.org/plus/misc/images/castro-pitching.jpg";
        var $image = $('<img src=LoadImage.aspx?imageUrl="' + image_url + '" width="50" height="50" />');
        $('body').prepend($image);
    });
</script>

LoadImage.aspx (.cs Code-Behind)

using System;
using System.Net;

public partial class LoadImage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        String url = Server.UrlDecode(Request.QueryString["imageUrl"]).Replace("\"", "");
        WebRequest req = WebRequest.Create(url);
        System.Drawing.Image img = System.Drawing.Image.FromStream(req.GetResponse().GetResponseStream());

        Response.Clear();
        Response.ContentType = "image/jpeg";
        img.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
    }
}

Похоже, это успешно загружает изображение и отображает его, перенаправляет 302 и все ... Я не знаю ни одного способа сделать это без какой-либо работы на стороне сервера.

Если вы не можете использовать .NET, но можете использовать другой язык или вообще не можете использовать какой-либо другой язык, дайте мне знать ...