locked
How to use local image in blazor ? RRS feed

Answers

  • User-474980206 posted
    The issue will be that the image urls are not correct. Use the browsers debug tools to see the url. As the browser is fetching the images they must be correct for the current url in the browser.

    Blazor could make a web client call to web api to get the root path. If you already are calling the server to the image list, have the web api build fully qualified urls.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 2, 2019 12:49 AM
  • User-1764593085 posted

    Hi mehmoodahmed,

    It works for me.I create a blazor in vs 2019, add an image in wwwroot folder as `wwwroot/images/myfile.PNG`, and from the SO link, I remove ~/ and it works.

    <img src="images/myfile.PNG" alt="Image">

    Where are your images? How do you display it?

    Configure your `app.UseStaticFiles()` if they are in other folders.

    Refer to https://stackoverflow.com/questions/55371811/asp-net-core-2-load-and-display-images-from-local-disk-drive

    Best Regards,

    Xing

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 2, 2019 10:01 AM
  • User-1764593085 posted

    Hi mehmoodahmed,

    mehmoodahmed...

    I have checked the images. images are working but crousal slider images are not working.

    Do you mean you could display image successfully in blazor with a simple <img> tag already, but you could not show it in  crousal slider ?

    mehmoodahmed...

    Now I have moved my all views in Blazor project type and images under wwwroot.

    Do not mean you move blazor views to wwwroot ?And why? The wwwroot is used to store static files.

    What I mean is that,for example, in a blazor project, you place some images in wwwroot and display it in Index.razor using crousal slider .

    If you would like to get image in other folder you could configure `app.UseStaticFiles()` in startup Configure method:

    https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-2.1#serve-files-outside-of-web-root

    To make the slider work, you need to add some reference in _Host.cshtml(Or Index.html)

    <body>
        <app>@(await Html.RenderComponentAsync<App>())</app>
    
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
                integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
                crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
                integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
                crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
                integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
                crossorigin="anonymous"></script>
        @*<script src="_framework/blazor.webassembly.js"></script>*@
       
    
        <script>
            window.initializeCarousel = () => {
                $('#carouselExampleIndicators').carousel({
                    interval: 1000
                })
            }
        </script>
    </body>

    Index.razor

    @page "/"
    @inject IJSRuntime JsRuntime;
    <h1>Hello, world!</h1>
    
    Welcome to your new app.
    
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="images/icons/img1.jpg" asp-append-version="true" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="images/icons/img2.jpg" asp-append-version="true" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="images/icons/img3.jpg" asp-append-version="true" alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    
    
    @functions {
           
    protected async override Task OnAfterRenderAsync()
        {
            
                await JsRuntime.InvokeAsync<object>("initializeCarousel");
            
        }
    }

    My structure:

    Refer to https://stackoverflow.com/questions/56513221/how-to-use-bootstrap-carousel-in-blazor

    Best Regards,

    Xing

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 5, 2019 7:47 AM
  • User-474980206 posted

    the following:

            <img class="d-block w-100" src="images/icons/img1.jpg" asp-append-version="true" alt="First slide"> 

    tells the browser (which is fetching the image), that the path is relative to the url of the page hosting the above html. you should use the browsers network trace to see the actual url used to fetch the image, and what the error was (not found, permission, etc). 

    its more common to use absolute path:

        <img class="d-block w-100" src="/images/icons/img1.jpg" asp-append-version="true" alt="First slide"> 

    this request should be handled by the static file handler you register. check the path it was configured with.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 5, 2019 4:07 PM
  • User-1764593085 posted

    <script src="_framework/blazor.server.js"></script>

    Does the above line indicates that views 'll be rendered on server ?

    and

    <script src="_framework/blazor.webassembly.js"></script>

    Does it mean that above line 'll be used for client side ?

    Yes, you could see more details in this link:

    https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.0#client-side

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 6, 2019 1:29 AM
  • User-474980206 posted

    blazor is client / server system. the blazor client is written in javascript (typescript actually), and runs in the browser. it captures events and calls the blazor server to render html.  The blazor server can be hosted on the web server, in which case the javascript makes ajax calls to communicate with the blazor server, or the blazor server can be hosted as a web assembly.  In the case of webassemly then the web assembly interop communication is used.

    there is actually a third case where blazor is configured for web assembly, but the browser does not have web assembly support. in this case the client javascript has a web assemby emulator written in javascript. 

    the blazer web assembly is a .net vm written in javascript. it loads the compiled blazor dll's and runs them. web assembly programs do not have direct access to browser events or the dom. client javascript must handle this. 

    if you write complex blazor components you may need to write the html render in C#, and also a javascript library to handle events and dom references.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 6, 2019 5:05 AM

All replies

  • User-474980206 posted
    The issue will be that the image urls are not correct. Use the browsers debug tools to see the url. As the browser is fetching the images they must be correct for the current url in the browser.

    Blazor could make a web client call to web api to get the root path. If you already are calling the server to the image list, have the web api build fully qualified urls.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 2, 2019 12:49 AM
  • User-1764593085 posted

    Hi mehmoodahmed,

    It works for me.I create a blazor in vs 2019, add an image in wwwroot folder as `wwwroot/images/myfile.PNG`, and from the SO link, I remove ~/ and it works.

    <img src="images/myfile.PNG" alt="Image">

    Where are your images? How do you display it?

    Configure your `app.UseStaticFiles()` if they are in other folders.

    Refer to https://stackoverflow.com/questions/55371811/asp-net-core-2-load-and-display-images-from-local-disk-drive

    Best Regards,

    Xing

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 2, 2019 10:01 AM
  • User-234441352 posted

    thank you both.

    Images are not being still loaded. 

    I have checked the images. images are working but crousal slider images are not working.

    At first , Images were placed in a separate project under content folder.

    content/images/icons/img1.jpg

    Now I have moved my all views in Blazor project type and images under wwwroot.

    Now full path is : wwwroot/images/icons/img1.jpg

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="images/icons/img1.jpg" asp-append-version="true" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="images/icons/img2.jpg" asp-append-version="true" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="images/icons/img3.jpg" asp-append-version="true" alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    
    This is my tried code for slider. 
    

    Kindly suggest.

    Sunday, August 4, 2019 10:04 AM
  • User-1764593085 posted

    Hi mehmoodahmed,

    mehmoodahmed...

    I have checked the images. images are working but crousal slider images are not working.

    Do you mean you could display image successfully in blazor with a simple <img> tag already, but you could not show it in  crousal slider ?

    mehmoodahmed...

    Now I have moved my all views in Blazor project type and images under wwwroot.

    Do not mean you move blazor views to wwwroot ?And why? The wwwroot is used to store static files.

    What I mean is that,for example, in a blazor project, you place some images in wwwroot and display it in Index.razor using crousal slider .

    If you would like to get image in other folder you could configure `app.UseStaticFiles()` in startup Configure method:

    https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-2.1#serve-files-outside-of-web-root

    To make the slider work, you need to add some reference in _Host.cshtml(Or Index.html)

    <body>
        <app>@(await Html.RenderComponentAsync<App>())</app>
    
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
                integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
                crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
                integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
                crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
                integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
                crossorigin="anonymous"></script>
        @*<script src="_framework/blazor.webassembly.js"></script>*@
       
    
        <script>
            window.initializeCarousel = () => {
                $('#carouselExampleIndicators').carousel({
                    interval: 1000
                })
            }
        </script>
    </body>

    Index.razor

    @page "/"
    @inject IJSRuntime JsRuntime;
    <h1>Hello, world!</h1>
    
    Welcome to your new app.
    
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="images/icons/img1.jpg" asp-append-version="true" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="images/icons/img2.jpg" asp-append-version="true" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="images/icons/img3.jpg" asp-append-version="true" alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    
    
    @functions {
           
    protected async override Task OnAfterRenderAsync()
        {
            
                await JsRuntime.InvokeAsync<object>("initializeCarousel");
            
        }
    }

    My structure:

    Refer to https://stackoverflow.com/questions/56513221/how-to-use-bootstrap-carousel-in-blazor

    Best Regards,

    Xing

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 5, 2019 7:47 AM
  • User-474980206 posted

    the following:

            <img class="d-block w-100" src="images/icons/img1.jpg" asp-append-version="true" alt="First slide"> 

    tells the browser (which is fetching the image), that the path is relative to the url of the page hosting the above html. you should use the browsers network trace to see the actual url used to fetch the image, and what the error was (not found, permission, etc). 

    its more common to use absolute path:

        <img class="d-block w-100" src="/images/icons/img1.jpg" asp-append-version="true" alt="First slide"> 

    this request should be handled by the static file handler you register. check the path it was configured with.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 5, 2019 4:07 PM
  • User-234441352 posted

    thank you  Zing Zou and bruce.

    It is working now.

    One bad thing is , anyone can view my html source.

    I want to ask one more thing,

    I had created a child view with the name of LeftBar and then used this view on index.razor. it is still not working.

    But when I directly use the source in Index.razor then Slider works.

    <script src="_framework/blazor.server.js"></script>

    Does the above line indicates that views 'll be rendered on server ?

    and

    <script src="_framework/blazor.webassembly.js"></script>

    Does it mean that above line 'll be used for client side ?

    Do you mean you could display image successfully in blazor with a simple <img> tag already, but you could not show it in  crousal slider ?

    Reply : Yes I was able to see simple images but crousal slider was not working.

    Do not mean you move blazor views to wwwroot ?And why? The wwwroot is used to store static files.

    Reply : Not i was not saying that views to wwwroot. just images were placed under wwwroot.

    thank you bruce for more clear understanding.

    Monday, August 5, 2019 6:48 PM
  • User-1764593085 posted

    <script src="_framework/blazor.server.js"></script>

    Does the above line indicates that views 'll be rendered on server ?

    and

    <script src="_framework/blazor.webassembly.js"></script>

    Does it mean that above line 'll be used for client side ?

    Yes, you could see more details in this link:

    https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.0#client-side

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 6, 2019 1:29 AM
  • User-474980206 posted

    blazor is client / server system. the blazor client is written in javascript (typescript actually), and runs in the browser. it captures events and calls the blazor server to render html.  The blazor server can be hosted on the web server, in which case the javascript makes ajax calls to communicate with the blazor server, or the blazor server can be hosted as a web assembly.  In the case of webassemly then the web assembly interop communication is used.

    there is actually a third case where blazor is configured for web assembly, but the browser does not have web assembly support. in this case the client javascript has a web assemby emulator written in javascript. 

    the blazer web assembly is a .net vm written in javascript. it loads the compiled blazor dll's and runs them. web assembly programs do not have direct access to browser events or the dom. client javascript must handle this. 

    if you write complex blazor components you may need to write the html render in C#, and also a javascript library to handle events and dom references.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 6, 2019 5:05 AM
  • User-234441352 posted

    Thank you bruce for providing this information.

    Bruce If blazor doesn't directly load the DOM objects then can we assume that 

    Efficiency or speed 'll be slower than from normal JavaScript applications ?  

    But Microsoft claims this is a blazing speed technology. 

    Thank you bruce :)

    Thursday, August 8, 2019 6:01 PM