用 Blazor 中加载的图像填充 div答案

【问题标题】：populate div with images on load in Blazor用 Blazor 中加载的图像填充 div
【发布时间】：2020-03-15 09:29:24
【问题描述】：

我是 Blazor 的新手。我想要做的是创建一个带有分页的图片库。我设法使用 JavaScript 创建了带有分页的画廊。

我唯一的问题是，当它加载到页面上时，我只会看到下一个和上一个按钮。只有当我单击下一个按钮时，图像才会加载并且分页工作。

我有一个名为 objIm 的图像数组。然后，我使用 JS 代码用图像填充 id 为 contentPanel 的 div。

我已经在 JS 文件中尝试了 window.onload，但它不起作用。我插入了一个断点并进行了测试，当我启动该站点时它遇到了断点，但是一旦我导航到我有图片库的页面，它就不会显示图片。

我也试过在JS文件中调用loadMe函数，但也不行。

如何在 blazor 的页面加载时加载图像。我发现的大多数教程都使用 onclick 事件来调用函数。

请帮忙

Javascript 代码：

window.onload = function () {
       changePage(1);
    };
function loadMe() {
    changePage(1);
}

    var current_page = 1;
    var records_per_page = 5;

    var objIm = [
        { adimg: "https://thumbs.dreamstime.com/b/pineapple-headphones-wooden-table-horizontal-front-black-background-62166845.jpg" },
        { adimg: "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" },
        { adimg: "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" },
        { adimg: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" },
        { adimg: "https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" },
        { adimg: "https://images.unsplash.com/photo-1504575958497-ccdd586c2997?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1354&q=80" },
        { adimg: "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" },
        { adimg: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" },
        { adimg: "https://images.unsplash.com/photo-1531219432768-9f540ce91ef3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" },
        { adimg: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" },
        { adimg: "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" },
        { adimg: "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" },
        { adimg: "https://thumbs.dreamstime.com/b/pineapple-headphones-wooden-table-horizontal-front-black-background-62166845.jpg" },
        { adimg: "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" },
        { adimg: "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" },
        { adimg: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" },
        { adimg: "https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" },
        { adimg: "https://images.unsplash.com/photo-1504575958497-ccdd586c2997?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1354&q=80" },
        { adimg: "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" },
        { adimg: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" },
        { adimg: "https://images.unsplash.com/photo-1531219432768-9f540ce91ef3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" },
        { adimg: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" },
        { adimg: "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" },
        { adimg: "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" }
    ];

    function prevPage() {
        if (current_page > 1) {
            current_page--;
            changePage(current_page);
        }
    }

    function nextPage() {
        if (current_page < numPages()) {
            current_page++;
            changePage(current_page);
        }
    }

    function changePage(page) {
        var btn_next = document.getElementById("btn_next");
        var btn_prev = document.getElementById("btn_prev");
        var img_table = document.getElementById("contentPanel");
        var page_span = document.getElementById("page");

        if (page < 1) page = 1;
        if (page > numPages()) page = numPages();

        img_table.innerHTML = "";

        for (var i = (page - 1) * records_per_page; i < (page * records_per_page) && i < objIm.length; i++) {
            img_table.innerHTML += '<img class="myimg" src=' + objIm[i].adimg + '/>';
        }
        page_span.innerHTML = page + "/" + numPages();

        if (page == 1) {
            btn_prev.style.visibility = "hidden";
        } else {
            btn_prev.style.visibility = "visible";
        }

        if (page == numPages()) {
            btn_next.style.visibility = "hidden";
        } else {
            btn_next.style.visibility = "visible";
        }
    }

    function numPages() {
        return Math.ceil(objIm.length / records_per_page);
    }

Blazor 页面代码：

@page "/PageExample"
@inject IJSRuntime JsRuntime

<div class="row" id="contentPanel">

</div>
<div class="clear">
    <a href="javascript:prevPage()" id="btn_prev">Prev</a>
    <a href="javascript:nextPage()" id="btn_next">Next</a>
    page: <span id="page"></span>
</div>

@code {

    protected override async Task OnInitializedAsync()
    {
        await JsRuntime.InvokeVoidAsync(identifier: "loadMe");
    }
}

【问题讨论】：

标签： pagination blazor

【解决方案1】：

这是一个完整的版本，带有分页和禁用按钮等。不需要 Javascript ;-)

<div class="row" id="contentPanel">
    @foreach(String image in GetImagesToShow())
    {
             <img src="@image" style="height:150px;" />
    }
</div>
<div class="clear" style="margin:15px;">
    <button class="btn btn-info @DisablePrevious" @onclick="MovePrevious"  >Prev</button>
    <button class="btn btn-info @DisableNext" @onclick="MoveNext">Next</button>
    page: <span>@CurrentPage / @NumberOfPages() </span>
</div>


@code {

    int CurrentPage { get; set; } = 1;
    int RecordsPerPage = 5;

    void MoveNext()
    {
        if (CurrentPage < NumberOfPages())
        {
            CurrentPage++;
        }

    }

    void MovePrevious()
    {
        if (CurrentPage > 1)
        {
            CurrentPage--;
        }

    }

    string DisablePrevious {
        get {
            if (CurrentPage == 1) { return "disabled"; }
            return ""; 
        }
    }
    string DisableNext {
        get {
            if (CurrentPage == NumberOfPages()) { return "disabled"; }
            return ""; 
        }
    }


    int NumberOfPages()
    {
        return (int)(Math.Ceiling(((double)Images.Count /(double)RecordsPerPage)));
    }


    List<String> GetImagesToShow()
    {
        int skip = (CurrentPage - 1) * RecordsPerPage;

        return Images.Skip(skip).Take(RecordsPerPage).ToList();
    }



    List<String> Images = new List<String>() {
        "https://thumbs.dreamstime.com/b/pineapple-headphones-wooden-table-horizontal-front-black-background-62166845.jpg",
         "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" ,
         "https://images.unsplash.com/photo-1504575958497-ccdd586c2997?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1354&q=80" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.unsplash.com/photo-1531219432768-9f540ce91ef3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" ,
         "https://thumbs.dreamstime.com/b/pineapple-headphones-wooden-table-horizontal-front-black-background-62166845.jpg" ,
         "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" ,
         "https://images.unsplash.com/photo-1504575958497-ccdd586c2997?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1354&q=80" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.unsplash.com/photo-1531219432768-9f540ce91ef3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
    };

}

我已经把它放在 blazorfiddle 上，所以你可以玩，看看它是如何工作的https://blazorfiddle.com/s/p3htkqwn希望这会有所帮助

【讨论】：

嗨大卫，谢谢你，这真的很有帮助！ :) 我现在可以看到如何在不使用 Javascript 的情况下做到这一点。
Edit 只是我将 GetImageToShow 更改为 GetImagesToShow，因为我看到它后很烦。

【解决方案2】：

将img标签的src属性绑定到图片uri。

<img src="@imgSrc"/>

在导航时动态切换绑定的图像源。无需 javascript。

这是一个简化的工作示例：

@page "/"

<div>
    <img src="@Images[idx]" />
</div>
<button @onclick="()=>idx = idx + 1 >= Images.Count() ? 0 : idx + 1">Forward</button>
<button @onclick="()=>idx = idx - 1 < 0 ? Images.Count() - 1 : idx - 1">Back</button>

@code {

    public int idx;

    public List<string> Images = new List<string>()
    {
        "https://thumbs.dreamstime.com/b/pineapple-headphones-wooden-table-horizontal-front-black-background-62166845.jpg",
        "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s",
        "https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
    };
}

【讨论】：

嗨 Postlagerkarte，谢谢。我将测试您提供的代码示例。