i have a porlet running in liferay portal.after successfully entering the details , i want to download the details in an html page , in which i have to include an image.
this is done by giving the absolute path as:
<img src="http://localhost:8080/Demo-portlet/images/logo-1.jpg"
and it works fine.
My portlet structure is :
Demo-portlet-->docroot-->images-->logo-1.jpg
Now i want to do this by using relative path. i tried as below but it didnt work out:
<img src="../Demo-portlet/docroot/images/logo-1.jpg" />
<img src="./docroot/images/logo-1.jpg" />
<img src="./images/logo-1.jpg" />
None of the above worked. please tell me how this can be done.
Adding the html path:
Demo-portlet-->docroot-->download.html
Try this:
<img src="images/logo-1.jpg" />
Your portlet can be embedded on random pages. It's the page's URL that you need to be relative to, not the portlet.
If you have your portlet on http://localhost:8080/web/guest/home or http://localhost:8080/web/guest/about-us/contact/addresses, the relative address would need to be different. Thus I'd recommend to be relative with regards to the server name, but not with regard to the embedding URL: At development time you have no clue what name the pages that embed your portlet will have.
Go with <img src="/Demo-portlet/images/logo-1.jpg" /> or look up the servlet context (e.g. replace "/Demo-Portlet" with a dynamic value, so that you don't have to hard-code it).
(sorry, IDE not running and I'm always mixing up if it's request.getServletContext() or something else - try for yourself and comment here, I'll edit this answer when you give the full code). The dynamic stuff - on a jsp - would be <img src="<%=request.getServletContext()%>/images/logo-1.jpg" />
Related
I'm playing around with a basic Dot-Net web assembly application. In the application I'm displaying two images using two different image tags image and img. The size of the image is bound to a private variable Size. I've noticed a problem where images do not render in a specific scenario using the image tag.
Replication:
dotnet new blazorwasm
I downloaded the SVG from: Bootstrap icons, then I placed the SVG file in "wwwroot/Media/".
In index.razor I've updated the code as follows:
#page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<img src="Media/search.svg" alt="Bootstrap" width="#Size" height="#Size">
<image src="Media/search.svg" alt="Bootstrap" width="#Size" height="#Size"/>
#code
{
private static string Size => "75";
}
The result of running the above code shows only one image displaying
Through process of elimination, the image defined using the image tag is the problem here. If you tweak the code to use hardcoded values i.e.
<image src="Media/search.svg" alt="Bootstrap" width="75" height="75"/>
then the code works again as expected.
I'm aware that <image> is deprecated, but I'd like to understand if the reason the binding breaks the image displaying is due to the deprecation or something else?
Update
The generated HTML using the template is
<!--!--><div class="top-row px-4" b-vv8m6rf2se="">About</div>
<article class="content px-4" b-vv8m6rf2se=""><!--!--><!--!--><!--!--><!--!-->
<!--!--><h1 tabindex="-1">Hello, world!</h1>
Welcome to your new app.
<img src="Media/search.svg" alt="Bootstrap" width="75" height="75">
<image src="Media/search.svg" alt="Bootstrap" width="75" height="75"></image></article>
An interesting find, although of course not of any practical value, just use <img>.
I could easily reproduce this with a jpg image so it's not about svg.
Now for a speculative answer:
Blazor treats <image> like any other tag and the generated HTML looks like expected. But according to this answer,
The HTML5 parsing spec requires that the tag is mapped to the img element at the tree construction stage
This makes me think that when the complete tag is rendered just once it works fine, handling is up to the browser.
But after Blazor has filled in the #Size it will try to update the HTML it generated earlier. If the Browser really changed <image> to <img> internally then the JS Bridge will have trouble finding the element again and the updates fail.
I'm sure this is super easy but I'm a beginner. I have my code to pull up my logo but my logo just pulls up a broken image icon. See screencast
See screencast: http://screencast.com/t/ar8cpTIbMs
Here is my HTML:
<div id="logo">
<img src="C:\Users\Brent\Documents\Website Development"/>
</div>
I really only need my HTML figured out and I assume the CSS will work pretty well after that. Thanks for the help!
You must enter the correct file name for src. Such as
<img src="C:\path\to\your\file.jpg" />
http://www.w3schools.com/tags/tag_img.asp
Please note that it is not a good practice to use absolute paths in your src attribute.
In the other hand, you can use base64 encoded image data as src of your img tag. Something like
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...//Z" />
https://www.base64-image.de/tutorial
If you use this method, you dont need to keep your logo.jpg file anywhere.
Hope this will help.
You are linking to a directory in your img tag, instead of an image file. Also, I would suggest either practicing online in a free webhost or downloading a stack package like WAMP/MAMP/LAMP. You'll start running into problems where you can use http protocols pretty quickly in your studies. Though, that can get technical, so I say stick to a free webhost for now. You will get weird hang ups trying to use the file system that will ultimately confuse you while you are trying to learn.
The problem lies in your src for your <img>. You're linking it to a directory /Users/Brent/Documents/Website Development right now, when you should be linking it to the image. If your image is called logo.png, then you should link it with C:\Users\Brent\Documents\Website Development\logo.png. Also, instead of linking it to C:\Users\Brent\Documents\Website Development\logo.png, link it to the image based on where the file is. For example, if your file is in \Website Development\index.html, then all you need to put for the src is "logo.png".
You should move your logo to the same path as your website. Ex:
Website: C:/site/index.html
Logo: C:/site/logo.jpg
Then include the logo as:
<div id="logo">
<img src="logo.jpg">
</div>
Hint: You don't have to have the div for the logo to show up.
please enter the complete path including your image.
for example if your file name is mypic.jpg .Then
<img src="C:\Users\Brent\Documents\Website Development\mypic.jpg" />
I am currently doing an assignment for school and my teacher has sent all the project photos which I have saved. The only problem is they will not show up no matter what I try doing.
ex. the image is named "photo1.jpg" and I did:
<img src="photo1.jpg">
But the image will not load. if anyone has any suggestions I'd appreciate it.
If you mean on a webpage then the use this code to generate the image:
<img src="photo1.jpg"/>
Keep in mind that the photo1.jpg needs to be in the same directory as the file (webpage) calling it.
Check the location of the image. It should be in the same folder
<img src = "photo1.jpg" />
if it is not, and it has its own image folder inside your project you can do it like this
<img src = "imagesFolder/photo1.jpg" />
<img src="photo1.jpg"></img>
Don't forget that this links current page folder. If you have in eg. in images directory, then use
<img src="images/photo1.jpg"></img>
I am using spring mvc 3.2.0.RELEASE.
I want to display an image in my jsp tag and for that i am using this line in my jsp code:
<img src="images/login_pic.png"/>
it is not fetching the image. Can you please suggest a solution ?
My JSP is in the location : WebContent/WEB-INF/views/index.jsp
my image is in the location: WebContent/WEB-INF/views/images/login_pic.png
Try this:
<img src="${pageContext.request.contextPath}/images/login_pic.png"/>
<mvc:resources mapping="/images/**" location="/WEB-INF/views/images/"
cache-period="10000" />
add this to your context configuration file , then you can refer your images this way:
<img src="/images/login_pic.png"/>
<img src="/images/login_pic.png"/>
this will go from the very top root (this one should do) given that your root is on the index.
<img src="../images/login_pic.png"/>
this will go one level above your current location
<img src="../../images/login_pic.png"/>
this will go two level above your current location
<img src="images/login_pic.png"/>
what you have looks at the same folder
/folder
html
login_pic.png
I'm a newbie in ruby so please ignore my little mistakes ;)
Im trying to show an image in a View and everything works fine except the path of the image I gave to img's src attribute, I'm using Rails 4 and as a default web project tree in Rails my project has following directories
app
config
db
public
and some other…
my image is in "app\assets\images\file.jpg"
And i Have coded this line in my html file.
<img src="/app/assets/images/file.jpg" alt="image" />
But image doesn't load on the page!!!
When I check it in "firebug" I found the request of:
"http://localhost:3000/app/assets/images/file.jpg"
this request exactly means "public\app\assets\images\file.jpg"
and clearly is not my path! and even does not exist.
What should I code for src's value to make it!?
Try this:
<img src="<%= asset_path("file.jpg") %>" alt="image" />