Hi new to spark so this should be simple.
I'm converting an old webfoms page to mvc using spark.
I want to use the Base.Application to make up the src of a url
original markup
<img alt="" src="<%= Base.ApplicationPath %>images/screenshots/myImage.jpg" />
I've tried this in spark
<img alt= src=${ Base.ApplicationPath }+">images/screenshots/myImage.jpg" />
but no joy.
How do i do this in spark?
Not sure if you're aware of this, but Spark has a DefaultResourcePathManager that will automatically locate the Site Root if you prefix the resource with a tilde, so this should work just fine, and looks neater.
<img alt="" src="~/images/screenshots/myImage.jpg" />
There's an added bonus to using this technique as well....hold on to your shorts! Without changing your view, simply by making sure you use the tilde convention, you can dynamically redirect requests for your static resources to a content delivery network (CDN) or a completely different location - even an embedded resource inside a Spark Module .dll you compile for dll drop in deployment.
For example, to hook it up to a CDN, all you'll need to do is add the following kind of thing to your Spark Settings:
<resources>
<add match="/content/images" location="http://mycdn.com/youraccount/images"/>
<add match="/content/css" location="http://mycdn.com/youraccount/css"/>
<add match="/content/js" location="http://mycdn.com/youraccount/js"/>
</resources>
...and from then on those resources will be fetched from the new location instead. This is great for scenario testing locally, and the deploying to the cloud later.
Slight tweak of the syntax has sorted it.
<img alt="" src="${Base.ApplicationPath}images/screenshots/myImage.jpg" />
Related
I am using Symfony2 with twig to generate HTML, however the HTML I am generating is not intended for a web browser, instead it will be passed to a library that converts HTML to a PDF document.
There are two related issues I am facing.
Issue 1. This PDF will have images included, I don't want these images to be visible directly from the internet (e.g. I don’t want these images to appear under webroot). Usually I put assets in “site/src/path-to-bundle/Resources/public/assets” however, I don't want this image to be visible on the web. Can anyone suggest a good folder to put “assets” in that are not meant to be accessible via the web. (Just trying to be consistent with Symfony2 naming techniques and how other programmers would usually do this)
Issue 2. Since the HTML I am generating is intended for the HTML to PDF generator, it is most practical to refer to images with absolute paths on the file system (web paths or URLs are not suitable in this situation).
For example
<!-- This is the correct HTML code that is needed in this situation -->
<img src="/home/user/absoulte-file-system-path-to/image.png" />
<!-- These are actually incorrect in this situation -->
<img src="assets/image.png" />
<img src="http://www.somedomain.com/assets/image.png" />
I would like to know how to get the absolute path to the image mentioned above (I don’t mind if this is done in the Twig template or in the controller)
in you app/config/config.yml
twig:
globals:
root_path: %kernel.root_dir%
and you can refer to asset with relative path to your root project
<img src="{{ root_path }}/../secret-folder/image.png" />
I'm dealing with a web application that resides within a subdirectory on a domain, and I'm attempting to discern the most idiomatic way of inserting a proper URL into an img tag. While the following both produce the same HTML on the client machine, I'm not sure which is more "correct"
<img src="~/Content/images/blah.png" />
<img src="#Url.Content("~/Content/images/blah.png")
Both of these produce an absolute path of /subfolder/Content/images/blah.png, so both work, but I'm curious which one is the right way of doing it.
Is there any difference between these two approaches (for example, is one being resolved by a different mechanism than the other?), or is the former just syntactic sugar for the latter?
With MVC4 you no longer need #Url.Content
If Razor detects ~/ it would created an output identical to
#Url.Content.
http://www.beletsky.net/2012/04/new-in-aspnet-mvc4-razor-changes.html
Nothing is "more correct". I would use the shorthand since Razor now supports it.
if you are passing string through controller, you need to use #url.content().
but it you are passing path directly in .cshtml, no need to use #url.content().
Ex. No need.
<img src="#Url.Content("~/Content/images/blah.png") />
NEED
#ViewBag.ImagePath = "~/Content/images/blah.png";
<img src="#Url.Content(#ViewBag.ImagePath)" />
In my webapp, I have a folder Views. In this folder several .aspx pages live. I don't use the rendered contents directly in the webapp, rather I request the contents using ajax in a main aspx page on the root of the webapp.
Now when I refer to an image, "images/image.png" will work since the image reference lives in the aspx page on the root. When I change this to "/images/image.png", this won't work since the root is determined by the virtual IIS folder.
How can I have a clean reference e.g. "/images/image.png"?
Firstly and probably most elegant, make the element run at the server and use the root-reletive url:
<img src="~/images/image.png" alt="image" runat="server" />
This will automatically translate your src-value into a path which will resolve from your current location. However, there is one caveat. If you do it on pages which are included, asp.net may create an incorrect value here, as it could be morphed into
<img src="../images/image.png" alt="image" />
if you are a directory down. So if you include this result in a page in the application root folder, your value may not be correct. I have not seen a good way to work around this. It will, however, show you a warning if the file doesn't exist.
Alternatively, you may want to manually set the root path for such pages:
<img src="<%=Request.ApplicationPath %>/images/image.png" alt="image" />
which will transform into a path always coming from the root of the site:
<img src="/AppPath/images/image.png" alt="image" />
Obviously, this is a bit more verbose. Additionally, you will not be able to see any warnings if the referenced file does not exist, as it will be dynamically built.
I have a bunch of images in my localhost folder (C:\inetpub\wwwroot\Images) which I am trying to access within my ASP.net application. The image src generated in my markup is:
<img id="MainContent_MainImage" src="localhost/Images/FGOStuart_7166.jpg" />`
This fails to load the image and if I look at the source for the page it actually directs to
http://localhost:64395/Pages/localhost/Images/FGOStuart_7166.jpg
so it looks like it is trying to access a path relative to the page (on the Pages folder). The src works if I type it into the browser manually and the image is displayed.
Can anyone explain what's going on here and how to fix it? I'm attempting to move the images out of the database and onto the file system but without much luck so far.
That's because the browser assumes "localhost" is a folder and adds it to the current relative path. Add http to it and it should work fine, or remove localhost altogether and just leave the /Images... part.
Try it like this:
<img id="MainContent_MainImage" src="~/Images/FGOStuart_7166.jpg"
alt="An Image" runat="server" />
This resolves it server-side from the root down. And always use an alt :)
What you really want to be doing is using the magic tilde:
<img id="MainContent_MainImage" runat="server" src="~/Images/FGOStuart_7166.jpg" />
~ signifies the root of the application. Notice I added runat="server", too.
I'm trying to create theme for Orchard CMS. The template I have wasn't made for it so I have some troubles displaying images from Layout.cshtml.
This is the current folder structure on my web server (theme folder structure only):
Theme/Content/Images/Image.jpg
Theme/Views/Layout.cshtml
Theme/Styles/Site.css
The following line doesn't display image (located in Layout.cshtml):
<img src="../Content/Images/bgBig.jpg" alt="Big background image" />
However, this line does display the image (located in Site.css):
background-image:url('../Content/Images/bgLines.png');
I believe the problem is that Layout.cshtml doesn't display the image from Theme/Views/Layout.cshtml, but from the other location. If someone knows what would be that location or how to override it I would be thankful.
I might be a little late, but this may be of help to others.
To get the current theme and then build an dynamic path (as opposed to an absolute path) use this:
WorkContext.CurrentTheme: Gets the current working theme ExtensionDescriptor.
Then give it to the Html.ThemePath URL builder:
Ex.
Html.ThemePath(WorkContext.CurrentTheme, "/Content/Images/SomeImage.png")
Have fun!
Best regards,
Tiago.
When adding images in Layout.cshtml you should use the full path to your theme (eg. /Themes/My.Theme/Content/Images/MyImage.jpg). Remember that the paths you provide in [img] tag are relative to the URL in browser, not the path on the server. In MVC those are almost never equal.
Layout.cshtml view file gets loaded as a part of every single request, so relative paths placed inside will almost always break.
Imagine you have two Orchard pages: site.com/mypage and site.com/something/mypage. Layout.cshtml gets rendered in both of them. Relative URLs working for the first will surely break when you access second one.
CSS stylesheets are loaded directly by specifying absolute path to the physical files in /Themes/YourTheme/Styles folder (default), so in this case relative URLs will work.
HTH
Thx Tiago for your solution. I think this is in fact the correct solution, as opposed to linking the full path which I think would require the Orchard site to be on the root of the domain.
The full image reference of the original question would look like this:
<img src="#Url.Content(Html.ThemePath(WorkContext.CurrentTheme, "/Content/Images/bgBig.jpg"))" alt="Big background image" />
I'm surprised that nobody's mentioned that you need the following web.config in the folder in which your images/scripts/styles reside (see the orchard docs)
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.web>
<httpHandlers>
<!-- iis6 - for any request in this location,
return via managed static file handler -->
<add path="*" verb="*" type="System.Web.StaticFileHandler" />
</httpHandlers>
</system.web>
<system.webServer>
<handlers accessPolicy="Script,Read">
<!-- iis7 - for any request to a file exists on disk,
return it via native http module.
accessPolicy 'Script' is to allow for a managed 404 page. -->
<add name="StaticFile" path="*" verb="*" modules="StaticFileModule"
preCondition="integratedMode" resourceType="File"
requireAccess="Read" />
</handlers>
</system.webServer>
</configuration>
Additionally, as others have pointed out, this is the most reliable way of locating an image:
<img src="#Url.Content(Html.ThemePath(WorkContext.CurrentTheme, "/Content/Header.png"))" />
if you examine the source, it should show you where it's trying to find that image and failing. It's most likely the relative path it's having issue with, try an absolute path in the css to see if that's the issue. without the actual site, I can't know for sure.