I'm looking into upgrading an existing MVC5 project to MVC6. However when I try to get an image to display in the MVC6 project, it 404s. The path to the image is:
/Content/images/image.png
In my MVC5 project, the following works:
<img src="#Url.Content("~/Content/images/image.png")" />
I have tried the following:
<img src="#Url.Content("~/Content/images/image.png")" />
<img src="#Url.Content("/Content/images/image.png")" />
<img src="#Url.Content("Content/images/image.png")" />
<img src="#Url.Content("~Content/images/image.png")" />
<img src="~/Content/images/image.png" />
<img src="/Content/images/image.png" />
<img src="Content/images/image" />
<img src="~Content/images/image.png" />
<img src="C:\absolute\path\Content\images\image.png" />
Has the way to reference an image changed with MVC6?
You need to put the image under the wwwroot folder. Only static files under this folder are served up. You also need to make sure you have added support for static files in your Startup.cs file.
public void Configure(IApplicationBuilder application)
{
// Add static files to the request pipeline e.g. hello.html or world.css.
application.UseStaticFiles();
// Add MVC to the request pipeline.
application.UseMvc();
}
While I think it's better to move your files into the wwwroot folder as in the accepted answer to follow standard convention, you can also change the path for static files via configuration.
In your project.json file, change the configuration attribute to point to your static file path.
"webroot": "wwwroot"
Just an alternative approach.
Related
I want to add a photo to my project, but for some reason it doesn't want to add locally
Can someone help me how to do this?
template:
<li v-for="book in books" :key="book.id">
*Some code here*
<img :src="book.image"/> <<<-----Here
</li>
script:
export default {
data() {
return{
books: [
image: "../assets/images/a-Dolls-house.jpg"
]
}
}
}
Change <img :src="book.image"/> to <img :src="require(book.image)"/>
This will work because the assets folder is not public to the browser. Meaning that when you try to call from the assets folder it cannot find the path specified because the webserver cannot find the assets folder. However by calling require we load the image from the assets folder, and convert it to a base 64 encoded image. Which can be seen by the browser as it is compiled into your chunk.
The other option you have is to move your images folder to the public directory and change your image property to image: "/images/a-Dolls-house.jpg". Then the image will be public and can be accessed from the browser. Without increases your chunk sizes, or increasing your memory overhead, as the images would be linked instead of compiled.
I want to style some text from an object property in an array, therefore I use v-html. But when I insert a picture with these syntaxs, it doesn't work.
<img :src="#/assets/image.png" alt="image description">
//or this
<img :src="require('#/assets/image.png') alt="image description'">
//or this
<img src="#/assets/image.png" alt="image description">
What's the correct way to do it?
v-html will render value as HTML without any change in the browser.
So you can't pass vue or javascript code (:src="#/assets/image.png") to this.
From the documentation:
the contents are inserted as plain HTML - they will not be compiled as Vue templates
<img src="#/assets/image.png" alt="image description">
This is correct, if the image is not loading then you have not put it in the correct directory.
#/assets are loaded from src/assets and the compiler optimizes and builds them out to public dir.
It is an alias:
# = src
I created a Blazor WebAssembly hosted template in .NET Core 3.1. Then right clicked on project.Client/wwwroot/css folder and clicked on Add client side library. Then selected the Font Awesome library and installed it. I added the below line to index.html <head>.
<link href="css/font-awesome/css/fontawesome.css" rel="stylesheet"/>
I have libman.json of:
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "font-awesome#5.11.2",
"destination": "wwwroot/css/font-awesome/"
}
]
}
I added just the below line to the default Blazor template page Counter.razor (Razor component). The IntelliSense finds the font:
#page "/counter"
<h1>Counter</h1>
<span class="fa fa-save"></span>
#code {}
but I only see a square:
You also need to include the JavaScript.
<link rel="stylesheet" href="css/font-awesome/css/fontawesome.min.css" />
<script src="css/font-awesome/js/all.min.js"></script>
You can put the <script> tag below the other one at the bottom of the file but I doubt that you'll notice any speed difference.
From a now deleted comment:
The JS is just one option (the preferred option), but CSS only is still an option as well. Also, you don't use both. It's either CSS or JS
In Blazor I could only get the JS version to work. CSS only didn't work (the file was 200-OK).
The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands. ref
add to _hosts.cshtml (for server side)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
Use fas as below:
#page "/counter"
<h1>Counter</h1>
<span class="fas fa-save"></span> <!--fas not fa-->
#code {}
This is tested in blazor Net5
You can use libman (or copy the files manually from the zip available at Fontawesome website). Then install/copy only all.min.css and the whole contents of webfonts folder into wwwroot/css/font-awesome subfolder. Like this:
Then put this into Pages/_Host.cshtml (for Blazor Server) or wwwroot/index.html (Blazor Web Assembly) into the head section:
<link rel="stylesheet" href="css/font-awesome/css/all.min.css" />
Or, as an alternative, add this at the beginning of site.css:
#import url('font-awesome/css/all.min.css');
No need for JS. It works.
You have to actually reference the stylesheet in your HTML page. This is usually done in the layout (_Layout.csthml). You need to add something like the following in your <head>:
<link rel="stylesheet" href="/css/font-awesome/font-awesome.min.css" />
FontAwesome have multiple framework supported (Vue, React, Angular, WordPress, LESS, SCSS). But I don't know why they are not providing it for Blazor.
So that, I have created "Brushtail.FontAweomse.Blazor" nuget package.
Instructions https://www.nuget.org/packages/Brushtail.FontAwesome.Blazor/
I have Identity scaffolded out in accordance with the documentation, and everything works properly except for the layout of the /Manage folder.
The directory setup is exactly as it gets scaffolded.
Directory setup with all misc. files removed
For clarity's sake:
/Areas/Identity/Pages/Account/Manage is the problem folder.
/Pages Contains the _ViewStart file which sets the Layout from my Views/Shared folder.
/Pages/Account Receives the layout from _Viewstart and works properly.
/Pages/Account/Manage Everything in here only receives the _ViewStart layout. The _Layout file in here isn't automatically found by the pages inside of it.
Areas/Identity/Pages/Account/Manage/_Layout.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Manage your account</h1>
<div>
<h4>Change your account settings</h4>
<hr />
<div class="row">
<div class="col-md-3">
<partial name="_ManageNav" />
</div>
<div class="col-md-9">
#RenderBody()
</div>
</div>
</div>
#section Scripts {
#RenderSection("Scripts", required: false)
}
This is exactly as it gets scaffolded in and the layout only breaks when you change AddDefaultIdentity() to AddIdentity(). I work with a reference I scaffolded and it just leads me to believe I'm not accounting for something when removing the default UI. The only workaround I found was manually setting the layout of each .cshtml file within /Manage
#{
Layout = "_Layout";
}
This fixes everything and causes the layout to work properly for the pages inside of /Manage. I read the documentation and it states that each Razor Page controller should search its own folder for a _Layout file before searching elsewhere. Is there a reason it isn't detecting the file?
"The only workaround I found was manually setting the layout of each .cshtml file within /Manage":
You don't have to do that. Simply create a _ViewStart.cshtml under your Manage/ foler:
#* file: Manage/_ViewStart.cshtml *#
#{
Layout = "_Layout"; // Use a partial layout name instead of absolute name
}
Also be careful that the default Manage/Layout.cshtml uses a parent layout of /Areas/Identity/Pages/_Layout.cshtml which might not exist in your scaffolded files :
#* file: Manage/Layout.cshtml *#
#{
Layout = "/Areas/Identity/Pages/_Layout.cshtml"; // you might want to change this to `/Views/Shared/_Layout.cshtml`
}
"it states that each Razor Page controller should search its own folder for a _Layout file before searching elsewhere"
That's true only when you're using a partial _Layout name. However, if you're using an absolute name that starts with a slash, it will use that layout directly. See official docs :
When a partial name is provided, the Razor view engine searches for the layout file using its standard discovery process. The folder where the handler method (or controller) exists is searched first, followed by the Shared folder. This discovery process is identical to the process used to discover partial views.
In your case, the layout name /Areas/Identity/Pages/_Layout.cshtml, which starts with a /, is not a partial name. That's the reason why your pages cannot discover the layout. In order to fix this issue, using a partial name _Layout instead. (This can be done by a single _ViewStart.cshtml file as I do above, don't add it for every page)
Finally, you might wonder why it renders normally when using AddDefaultIdentity(). As you find out, the AddDefaultIdentity() will add the default UI, which eventually invokes the AddRelatedParts() method. This allows that it fallbacks to the default UI when there's no such a layout or page. e.g., when you scaffold Identity with Visual Studio, it offers a list which you can use to override the default pages. The above /Areas/Identity/Pages/_Layout.cshtml comes from the default UI.
In my MVC4 application, I am using the postal package for sending emails.
I am trying to include a logo via an <img> tag, but it's not working.
How can I include my company logo?
Controller Action:
public ActionResult Index()
{
dynamic email = new Email("Example");
email.To = "xxxxx#xxxxxx";
email.FunnyLink = "haiii";
email.Send();
return View();
}
View:
To: #ViewBag.To From: lolcats#website.com
Subject: Important Message
<div style="background-color:aqua;">
Hello, You wanted important web links right?
Check out this: #ViewBag.FunnyLink
<br />
<img src="~/Images/Logo.png" />
</div>
You need to use full absolute image urls like this-
<img src="#Request.Url.GetLeftPart(UriPartial.Authority)/Images/Logo.png" />
or
If you're having html based files then you should send the domain name just like the other data you're passing into the view like this-
<img src="#ViewBag.DomainName/Images/Logo.png" />
When your email would be received by the users then the content of your email would not resolve the image path from relative urls like this -
/Images/logo.png {this will not work}
So the images can only be fetched if having full domain path.
You could use Html extension as shown below. You can refer here for more details.
<div style="background-color:aqua;">
Hello, You wanted important web links right?
Check out this: #ViewBag.FunnyLink
<br />
#Html.EmbedImage("~/Images/Logo.png")
</div>