Symfony 2 image with relative path display - symfony

I don't understand, why relative path for my image url don't work.
My image located at /web/bundles/mybundle/upload/image.jpg
In my template:
<img src = "bundles/mybundle/upload/image.jpg"/>
Application entry point - app.php is located in /web folder, on the same level as bundles folder and I suppose to see my image, when I render template.
But it seems, that image path is incorrect, because I do not see my image.
Only absolute path, with host, renders it correctly.
Can I use relative path or should proceed with absolute?

you should use the embeded asset package system, that resolves correctly the assets relative paths:
<img src="{{ asset('bundles/mybundle/upload/image.jpg') }}" />
Note that adding a leading slah ("/") has an impact.

Related

Insert Image to asp.net Page

I just want to insert a picture into a asp.net page and this is how I proceeded ...
in the project i created an image folder and inserted the image there. in the html I use the img tag and enter the path to the image as src. In the browser I see that there should be a picture but it is not displayed. not even with the absolute path
Folder Structure....
<img src="\Images\file_example_PNG_500kB.png" />
Move the Images folder inside the wwwroot folder - that's where all static files are served from.
You should then be able to use an app-relative URL for the image:
<img src="~/Images/file_example_PNG_500kB.png" />

Relative Path for static files like images/css/js etc

I have folder structure of /src/app/some-module/some-component and src/public/images/user.png. Now, when I am wiling to show an image in my some-component I have to give the path as ../../../public/images/user.png which seems to be too naive and wasteful effort once the number of images increase.
Do we have a routing mechanism or relative path in place in angular2 to serve static files. I am using the Angular2 with webpack.
It depends on how your base href looks like.
For e.g if you have
<base href="/src/">
you may easily use below irrespective of where your component template is.
<img src="public/images/user.png" />
Hope this helps!!
If you use WebPack, it takes care of the paths during the build.
The <img src="..."> needs to point to the physical location of the file within the project, relative to the template where it is used.
For instance, in my case, without WebPack, it would be
<img src="img/rhamt-square-248.png" width="172">
since the img/ is directly under the app root.
Whereas with WebPack, this works:
<img src="../../../img/rhamt-square-248.png" width="172">
Otherwise you'd get a compilation error such like:
ERROR in ./src/app/misc/about.component.html
Module not found: Error: Can't resolve './img/rhamt-square-248.png' in '/home/ondra/work/Migration/windup-web/ui/src/main/webapp/src/app/misc'
# ./src/app/misc/about.component.html 1:402-439
# ./src/app/misc/about.component.ts
# ./src/app/app.module.ts
# ./src/main.ts

How to get absolute file system path to an image Symfony2/Twig

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" />

What is the difference between Relative and Absolute paths in Aspnet MVC?

This relative and absolute paths always confuse me. i want to know how and where to use them in Asp Net MVC.
For Ex- If i want to use a img tag-
img src="#Url.Content("~/Content/themes/base/images/logo.png")" alt="Koiak Basic Site" />
img src="/Content/themes/base/images/logo.png" alt="Koiak Basic Site"/>
Kindly explain the difference between both of them
Absolute Path:
An absolute URL path. An absolute URL path is useful if you are referencing resources in another location, such as an external Web site.
<img src="http://www.contoso.com/MyApplication/Images/SampleImage.jpg" />
Relative Path:
A site-root relative path, which is resolved against the site root. Site-root relative paths are useful if you keep resources that are used throughout the site, such as images or client script files, in a folder that is located under the Web site root.
The following example path assumes that an Images folder is located under the Web site root.
<img src="/Images/SampleImage.jpg" />
For More Refer:
http://msdn.microsoft.com/en-us/library/ms178116.aspx
Coming to your Question:
<img src="#Url.Content("~/Content/themes/base/images/logo.png")" alt="Koiak Basic Site" />
Here because of using "~".It adds "server" path(i.e; your application path)" to your url. That means it takes img src as "yourapplicationPath/Content/themes/base/images/logo.png"
<img src="/Content/themes/base/images/logo.png" alt="Koiak Basic Site"/>
Here it takes as it is. i.e;"/Content/themes/base/images/logo.png"
For more refer this:
why use #Url.Content
http://digitalzoomstudio.net/2012/04/01/what-is-the-difference-between-absolute-and-relative-paths-urls/
What is the difference between / and ~/ relative paths?
Absolute Path
In terms of directory
When we refer to a location from root like C:\Documents\MyFolder, it is absolute path.
In terms of URL
Absolute paths are called that because they refer to the very specific location, including the domain name. The absolute path to a web element is also often referred to as the URL. For example, the absolute path to this is:
http://www.stackoverflow.com/posts/21670682
Relative path
In terms of directory
When we refer to a location relative where we currently are, it is called relative path. For example, say currently you are at Documents folder in C:\Documents, to refer to MyFolder you have two choices: Absolute (C:\Documents\MyFolder) or relative (\MyFolder).
In terms of directory
Relative paths change depending upon the page the links are on. There are several rules to creating a link using the relative path:
links in the same directory as the current page have no path information listed
filename
sub-directories are listed without any preceding slashes
weekly/filename
links up one directory are listed as
../filename

Path to css and images

For example I have site http://localhost/site
In IIS I set that 404 error causes redirection to default.aspx
If I type something like http://localhost/site/nodirectory , (there are no such folder) all works perfectly.
But if I only add slah at end http://localhost/site/nodirectory/, page can't display css and images.
Images and css are located in their own folder. I tried different paths: "gfx/logo.gif", "/gfx/logo.gif"
Does anyone have some ideas about that?
If your css and images are relative paths, say ResolveClientUrl("~/gfx/logo.gif") this renders to the client as src="gfx/logo.gif", which the browser with a slash thinks is /nodirectory/gfx/logo.gif instead of just /gfx/logo.gif.
To resolve this, don't use .ResolveClientUrl(), use .ResolveUrl(), this will make the src render src="/gfx/logo.gif" The beginning / makes it definitive, it's that path from the root of the domain.
You'll see this same hebavior if you're doing paths that start with ../ or gfx/ yourself...make them relative to the application base so there's no chance of confusion.
There are a couple of options...
1)
In your HTML page, make the path to CSS and scripts relative...
"/scripts/myscript.js"
Where the scripts folder is the first folder after the root folder
2)
You can add the base tag to your page, which means ALL page resources will be treated as relative to the root location you specify...
<base href="http://www.mysite.com">
More info about these two options.
If you can, option 1 is perhaps a bit cleaner. You know explicitly the resources that you are affecting. Using the base tag will affect ALL relative paths on your page. Images, Links, Scripts, CSS et al. The second option works best if you developed your 404 page assuming it would be in the root folder, but it could actually be referenced from any non-existent directory. You just put your root address in the base tag and it will all behave exactly as you expect.
With either option, the images can be relative to the location of your CSS file.

Resources