We use cookies to give you a great online experience. The static image path in the img tag is assigned as /StaticFiles/Image/OutsideWebRoot.png. perhaps I have the call the drawImage in the wrong place). Just add background-image: var(--bs-gradient);. Do you mean you could display image successfully in blazor with a simple tag already, but you could not show it in crousal slider ? Now I have moved my all views in Blazor project type and images under wwwroot. . First, lets look at the general way to display the image in the Blazor component. Here the image is obtained from {applicationFolder} /wwwroot/Image/InsideWebRoot.png. await this._context.DrawImageAsync(ImageMap, 0, 0, 500, 500); By clicking Accept all cookies, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy. the blazer web assembly is a .net vm written in javascript. 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. Define the image tag: along with a property to hold the base64 bytes: blazor is client / server system. Site design / logo 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA. Find centralized, trusted content and collaborate around the technologies you use most. it is still not working. end up doing is wrapping the razor page in a div and give it whatever class or id name you have setup to display the background image on only that page. To learn more, see our tips on writing great answers. Do not mean you move blazor views to wwwroot ?And why? This article explains how to display a static image in the Blazor component. 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), Refer tohttps://stackoverflow.com/questions/56513221/how-to-use-bootstrap-carousel-in-blazor. Were sorry. The Ultimate Guide to Blazor Forms and Validation, Static Image in Blazor Inside and Outside Web Root. Creates a Blob to wrap the ArrayBuffer. The nature of simulating nature: A Q&A with IBM Quantum researcher Dr. Jamie We've added a "Necessary cookies only" option to the cookie consent popup. Efficiency or speed 'll be slower than from normal JavaScript applications ? Try it Syntax The /StaticFiles is a RequestPath that is configured in the startup.cs file. case the javascript makes ajax calls to communicate with the blazor server, or the blazor server can be hosted as a web assembly. That is, sets equivalent to a proper subset via an all-structure-preserving bijection. Hi, is it able to specify a background image? For more information, please see our Image from application assets Example Edit Source Image from url Example Edit Source Image from base64 encoded string Example Edit Source Image from binary data Example Edit Source Source Code licensed under This path is the relative path after compilation, you can use to judge. The request path is set to /staticFiles, which is mapped to the static file. One bad thing is , anyone can view my html source. section: Specify the background image in the