Working on a .NET MAUI Blazor Hybrid and using MudBlazor for my UI. Images are currently not loading in my app. I have the following declared in the project file:
<!-- Images -->
<MauiImage Include="Resources\Images\*" />
Example call in the razor UI:
<MudAvatar Image="resources/images/foo.jpeg" Size="Size.Large" />
I should also mention if I call an external image in the razor UI it works. Following example image loads without any issues:
<MudAvatar Image="https://pbs.twimg.com/profile_images/1313493454710857730/ddYgxm9j_400x400.jpg" Size="Size.Large" />
I am testing the app in the Android Emulator and confirmed the image properties Build Action is set to MauiImage.
Am I missing something? Thanks in advance!
You can try to create a new folder named images below the project's wwwroot folder. Such as:
And then you can display the image such as:
<MudAvatar Image="images/foo.jpeg" Size="Size.Large" />
Related
I'm working with .NET Maui for the first time, and I already have problems with the Image. So when starting the default page, there is this robot image. I put another image into the /Image folder, and replaced it with the robot image in the xaml file.
I added this to my page:
<Image Source="Logo.png"
WidthRequest="250"
HeightRequest="250"
HorizontalOptions="Center"/>
But the image is not displayed on the page, the place where the image is is just blank. I don't know what I did wrong, because everyone said that it should work if the filename is correct, and the Image is in the right folder.
What am I missing?
From Image / Load a local image:
Images can be added to your app project by dragging them to the Resources\Images folder of your project, where its build action will automatically be set to MauiImage.
Sometimes it is necessary to Close Solution, then re-open it, for VS to update its list of included images.
This is the line in .csproj that "automatically" sets build action for all images in folder Resources\Images:
<MauiImage Include="Resources\Images\*" />
I am a newbie in asp.net. I m trying to add a logo in my _layout.cshtml file but it's not getting into view. It's showing a broken image. The image is in Assets folder. Don't know what I am doing wrong. Any help would be appreciated.
Here's the screenshot of my code and structure.
For static files in asp.net core, you need to place them in wwwroot folder in your project by default.
Follow steps below:
Move Assets folder to wwwroot
Change the html code like:
<img src="~/Assets/logo.png" />
I'm building the ASP.Net Core Web Application
I installed bootstrap using Quick Install Package. So now I have it in my dependencies:
Also, there's a folder "node_modules" with bootstrap and everything is fine there, all classes are where they're supposed to be:
Then I created a view and in html wrote the following:
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" />
When I hover the mouse over the href, I see a warning:
Path C:\Users\Shep\SportsStore\SportsStore\wwwroot\~node_modules not found
Well, it's true, because there's no such folder, but how to keep it from looking in wwwroot and use the specified folder? My wwwroot is empty, I guess it's because I didn't use bower
If I use the full path (href="C:/Users/Shep/SportsStore/SportsStore/node_modules/bootstrap/dist/css/bootstrap.css"), it seems right, but I bootstrap classes are unavailable:
<body>
<div class="panel-info">
</div>
</body>
and if I hover the mouse over, I see "Unknown CSS class 'panel-info'" even though there's this class in bootstrap.css
.panel-info {
border-color: #bce8f1;
}
I'm not using Angular and haven't created any js files of my own yet.
I have seen lots of similar issues and haven't found suitable solution, sorry if it's a duplicate
In ASP.NET Core, the runtime supports a piece of middleware called StaticFiles that allows anything in the /wwwroot folder to be accessible from the browser. But since the node_modules directory is outside of /wwwroot ,that problem occurs .
You can use Library Manager/Bundler and Minifier to copy the files into wwwroot . There are a lot of solutions you could find from here .
I am trying to deployment a setup for my WPF c# application. i suppose to do it using clickonce because it allow to auto update when i do any update in my application.
Actually i create a setup for my application. when i install that app in a different computer, it works...when i do some update my app, it automatically detect when program launching and user can install new update and run the app.
But it does not show any gif images when program running. when i install the app in a different computer, it create a desktop shortcut and start menu icon. when i run the program via shortcut or start menu, it does not show any gif images. it work fine without showing gif images.
app installed in
C:\Users\dilan\AppData\Local\Apps\2.0\TA5EZNVO.D56\TY5K2KDD.7B6\rcu_..tion_d1f05f20b6f0835a_0001.0000_d9a8ddd982f2efb7
i went to this location and double click the exe file. then app is running with showing gif images.but it does not update. update only happen when run the app via desktop short cut or start menu.
i tested the app by putting image files in to Images folder , Resources folder...but it does not work..
i think i missed some points when creating setup file. can anyone help me , how to deploy a setup file using clickonce , that app work with gif iamges also.
Here is how XAML looks like:
<Image gif:AnimationBehavior.SourceUri="pack://siteoforigin:,,,/Images/tapcard.gif"
VerticalAlignment="Center" Width="100" Margin="0,0,20,0"/>
I might not have inculded your images in your project.
See this answer. You need to right click the file in Solution Explorer and then Include in project .
When you include them, the Build Action of the image file would be set to Resource - no need to copy images individually (Copy to Output Directory should be by default set to Do not copy).
Let's say you have a WPF project in the folder Images named Progress.gif.
In code behind you reference it like this:
new BitmapImage(new Uri("pack://application:,,,/Images/Progress.gif", UriKind.Absolute))
In XAML you reference the image simply like this
<Image Source="./Images/Progress.gif" >
You can use another URI scheme as well, e. g. pack://siteoforigin:,,,/Images/tapcard.gif refers to an image that is located on the server where the app was deployed.
If you do not want to be bound by the restrictions of having your
application resources declared at compile time, there is another
option for you. No, this doesn't involve using fully qualified Uris to
reference resources over the internet. Although, that is indeed
supported. WPF provides you with an abstraction for the application's
conceptual site of origin i.e. the location from where the application
was deployed. For instance, if your application was launched from
http://nerddawg.blogspot.com, then your application's site of origin
is http://nerddawg.blogspot.com. To access an image at
images/AuntDahlia.gif at that location, you would specify in markup:
<Image Source="pack://siteoforigin:,,,/images/AuntDahlia.jpg" />
So you check in the properties of your WPF project on Publis tab the Publish location or Installation folder URL (if specified). If installation URL is e.g. http://myserver:8080 then you need to verify from the client, that the file http://myserver:8080/Images/tapcard.gif exists by typing this url into a browser. Depending on the folder structure of your web you might need to copy the file manually there.
pack://siteoforigin: means you are getting the resource over the network from the web or file server.
I deployed my MVC-3 project on the windowsAzure cloud service. Then when i opened it through
staging url. The images are not showns in my application. My image src is a relative address which is :
<img src="/images/1.jpg" alt="Lion" />
I am using jquery-UI as well but it plugins like ( button ) are also not working. I used cycle plugin, pagination plugin these are aslo not working. Whats the problem ?
altho your path 'appears' relative, you'll need to use the Url helper to navigate the folder structure correctly. Try using the below instead:
<img src='#Url.Content("~/images/1.jpg")' alt="Lion" />
All remote hosting is fickle and Azure is certainly no exception. This issue always catches me out if I omit the #Url.Content() helper. I'm certain this will work.
The problem probably is because your image is not imported in the MVC project. When you deploy a Cloud Service, only the resources that are in the project are deployed. Resources that are just in your file system are not.
I had this same issue and did the following:
my Images folder was outside the \Content directory, therefore, I created a directory inside this directory, so now I had \Content\images
I now moved my images to this new directory
Did a right-click on the images folder name in the Solution Explorer and clicked on option "Include in Project", I also did a right-click on the images itself and chose same option
Published and Voila it worked!
I had the same issue. I remote desktop to my server in Azure, opened IIS, went to the folder where I have the images and tried to Browse it, I got an Internal Server Error telling me "The requested page cannot be accessed because the related configuration data for the page is invalid". The issue was with this staticContent definition:
<mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
So I opened the web.config, searched for "mp4" and removed the section where I was defining that mimeMap.
After that I could browse the image and when I refreshed my page in my local machine all images showed up.
I then deleted that mimeMap definition from my Web.Release.config file. I had created it because previously I had published this project as a WebSite in azure and I couldn't deliver mp4 videos using the tag, but that seems not to be necessary when using a Cloud Service.
Hope this helps.