Как создать URL-адрес изображения в теге данных при использовании шаблонизатора Razor? - PullRequest
Новая
       122

Как создать URL-адрес изображения в теге данных при использовании шаблонизатора Razor?

0 голосов
/ 23 июня 2019

У меня есть приложение, которое написано поверх ASP.NET Core 2.2.Я использую шаблонизатор Razor для создания своего представления.

Я пытаюсь лениво загрузить свои изображения, чтобы повысить скорость загрузки на моей странице.Я хочу иметь возможность создавать теги изображений с таким образом 

<img src="" class="lazy-load" data-source="~/photos/@Model.ImageName" alt="" />

Однако использование директивы tilde ~ вне тега src не отображается правильно.Конечный результат выглядит примерно так: 

<img src="" class="lazy-load" data-source="~/photos/photo1.jpg" alt="" />

Но я ищу результат, похожий на следующий или что-либо из директивы ~.

Как я могу генерировать свои URL в теге data-source с помощью движка Razor?

Я уверен, что можно подумать, почему бы просто не опустить ~ и вместо этого написать URL /photos/@Model.ImageName.Причина в том, что я хочу, чтобы URL был сгенерирован после применения к ним промежуточного программного обеспечения.В этом случае я применяю заголовок срока действия кэша для каждого сгенерированного ресурса

Вот мое промежуточное ПО, которое я хочу включать каждый раз при создании URL-адреса фотографии 

app.UseStaticFiles(new StaticFileOptions
{
    RequestPath = "/photos",
    OnPrepareResponse = ctx =>
    {
        const int durationInSeconds = 60 * 60 * 12;
        ctx.Context.Response.Headers[HeaderNames.CacheControl] = "public,max-age=" + durationInSeconds;
    }
});

1 Ответ

1 голос
/ 23 июня 2019

Вы можете использовать Html.Content() помощник для генерации URL в вашем атрибуте data-source. Например, 

<img src="" class="lazy-load" data-source="@Html.Content($"~/photos/{Model.ImageName}") alt="" />

Кроме того, поскольку вы используете кеш, убедитесь, что вы проверили локальный кеш, прежде чем устанавливать атрибут src. Вы можете использовать следующее решение JavaScript, чтобы выполнить ленивую загрузку 

if (window.caches) {
    // A this point we know  the current window supports cache
    const images = Array.prototype.slice.call(document.querySelectorAll('img.lazy-load'));

    Promise.all(images.map(img => {
        const src = img.getAttribute('data-source');
        if (!src) return false;

        // Check if response for this image is cached
        return window.caches.match(src).
            then(response => {
                if (response) {
                    // The image is cached, load it
                    img.setAttribute('src', src); // set the src
                    img.removeAttribute('data-source'); // remove the data-source to prevent it from reloading
                }
            });
    })).then(lazyLoad); // now we can lazy images!
} else {
    // At this point the cache isn't supported or does not exists
    // Lazy load all images!
    lazyLoad();
}

function lazyLoad() {
    var elements = document.querySelectorAll('img.lazy-load');
    var totalElements = elements.length;
    for (var i = 0; i < totalElements; i++) {
        var src = elements[i].getAttribute('data-source');
        if (src) {
            elements[i].setAttribute('src', src);
            elements[i].removeAttribute('data-source');
        }
    }
}
...