How to add images in an html file?

Question

Anytime I have read an article on html and images, I have seen an anchor tag like this:

<img src="http://www.tizag.com/pics/htmlT/sunset.gif" />

However, in my case I have stored the image in AWS-S3 and I am reading image from S3. This, I do not upfront have a path like "http://www.tizag.com/pics/htmlT/sunset.gif"

So what is the most common technique to embed image in the html page when image is stored in S3, and the path to image is not known ?

In case my question is confusing, I will ask it differently.

I am building a project, which is simple. Whenever user is logged in he gets a page saying "Welcome" and below welcome note is is profile picture.

But, assume I have 10 users, each of these 10 users will have a different URL to the image.

eg:

<img src = "http:bucket.amazonaws.com/USER1'> for user 1

<img src = "http:bucket.amazonaws.com/USER2'> for user 2

and so on.

So the image I will display is not known until run-time and path to image is dependent on who logs in. How to make my HTML page smart so that the image src is not a constant and can be made flexible depending on who logs in ?

SOLUTION IN JSP, WHICH I COULD DO, THANKS TO SO MANY ANSWERS:

<body>

<% String url = (String)request.getAttribute("url"); %>

<img src = <%= url %>></img> 

</body>

This JSP code is called from the servlet.

request.setAttribute("url", "URL to image.");

RequestDispatcher view = request.getRequestDispatcher("URLImage.jsp");
view.forward(request, response);

Not really sure what you mean, but if the html page and the image are in the same or similar folder you can use relative paths: ``. Otherwise you can use some technique that renders your html pages and uses a placeholder for the path until it is known. — Marged, Nov 11 '15 at 18:27
So how would the workflow look like ? download image at some known path and use that path in html ? — JavaDeveloper, Nov 11 '15 at 18:32
I don't know if this fits your scenario but if your html is created by php (or servlet / jsp) you could do something like `"/sunset.gif />`. The critical path is how and when to set the $pathtos3 ;-) — Marged, Nov 11 '15 at 18:35
Sure, you can do the same with a jsp. Is this what you are searching for ? — Marged, Nov 16 '15 at 16:02
You can use PHP to sort the profile pictures. You can try creating a directory for each user on the server when they initially create their account and store the profile image there or you can just go with one single directory with all the profile pictures and just set the name of the profile picture to the person's username. You can always use a database to store the path if you need to as well. — www139, Nov 20 '15 at 09:16
@JavaDeveloper it depends how you upload the picture in the first place. If I were you, I would setup the system such that every user have a UUID and I will also create a directory with that UUID. When the user uploads a profile photo, I would store it under UUID directory with UUID.extension as its name. Every time the user page is requested, you have the UUID of user /USER1 or /USER2 and you know that USER1.jpg or USER2.jpg is their profile picture located under /USER1 or /USER2 directory. — Raf, Nov 20 '15 at 10:01
This could be interesting for you: http://stackoverflow.com/questions/27768596/how-do-i-show-an-image-from-my-amazon-s3-on-my-website — Cdric G, Nov 20 '15 at 12:45
You need a server side language or you have to know how many users do you have, create a pattern and setup a static array. The end.. — Luca Giardina, Nov 20 '15 at 17:19

score 3 · Answer 1 · answered Nov 13 '15 at 01:49

3

If your bucket was named my-bucket and the image file was named my-image.png, then the format for the url would be http://my-bucket.s3.amazonaws.com/my-image.png.

In order to access the file though, you need to have a policy attached to your bucket that allows anyone to access the file. Below is a policy that works for this example.

{
    "Id": "some-policy-id",
    "Version": "2012-10-17",
    "Statement": [
    {
        "Sid": "some-statement-id",
        "Principal": "*",
        "Action": [
        "s3:GetObject"
        ],
        "Effect": "Allow",
        "Resource": "arn:aws:s3:::my-bucket/my-image.png" 
   }]
}

See the docs for more information about accessing a bucket.

Also note that the bucket name must be DNS compatible for this to work. See here under Rules for Bucket Naming.

answered Nov 13 '15 at 01:49

David Morales

870
7
14

The question is requesting something different. Its not how to fetch image from bucket. Its requesting how to embed image in HTML, if the path is not known until runtime ? – JavaDeveloper Nov 13 '15 at 18:05
What if I do not know until runtime if I need my-image.png or sunset.png ? – JavaDeveloper Nov 13 '15 at 18:28
Ohh, thanks for clarifying. You probably want to dynamically set the src attribute of the image tag using Javascript (note: I do not have any experience with this). Maybe this [SO question](http://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag) can help you out. – David Morales Nov 13 '15 at 19:08
How is the html page being generated? This ^ assumes the page is static. If the page is dynamically generated, you can just change the src attribute before the page is sent to the browser. – David Morales Nov 13 '15 at 19:16

score 3 · Accepted Answer · answered Nov 19 '15 at 07:03

You require some kind of server side programming language to generate the the paths for the image dynamically for each user. Anyway you do have a setup for the users to login. For that, I believe you have some kind of framework in some server side scripting language like PHP(Laravel, Wordpress, CodeIgniter), Java(Spring), Ruby(Rails), Python(Django).

So when a user logs in, your login script should validate the user and you will render a particular html page. And you should show the name of the user and a particular image. In PHP or Ruby on Rails you can embed the actual PHP code or ruby code in HTML.

In PHP, like this :

<html>
    <head> </head>
    <body>
    <!-- say PHP Session varibale contains the logged in user's name & bucket name -->
        <img src="<?php echo "https://"+ $_SESSION["bucket_name"] +".amazonaws.com/"+$_SESSION["username"] ?>" />
    </body>
</html>

In Ruby on Rails, like this:

<html>
    <head> </head>
    <body>
    <!-- say Ruby - Rails controller passes @username & @bucketname to view -->
        <img src="<%= "https://"+ @bucketname +".amazonaws.com/" + @username %>" />
    </body>
</html>

In Python - Django, like this :

<html>
    <head> </head>
    <body>
    <!-- In Python - Django Suppose you pass context variables username & bucketname to template -->
        <img src="https://{{ bucketname }}.amazonaws.com/{{ username }}" />
    </body>
</html>

So what I would suggest is, you get familiar with the server side scripting language that you intend to use or are already using and manipulate the url to be generated based on logged in user accordingly.

score 1 · Answer 3 · answered Nov 16 '15 at 05:28

1

My suggestion is:
<img src = "http:bucket.amazonaws.com/USER1'> for user 1

<img src = "http:bucket.amazonaws.com/USER2'> for user 2
according to your examples in user1 and user2 having same path is http:bucket.amazonaws.com/ make it common for all and put variable after that and according to your user id fetch image from there. like <img src = "http:bucket.amazonaws.com/<?php echo $userimg; ?>'

or fetch img path from database according to users

answered Nov 16 '15 at 05:28

Raghavendra S

513
1
5
16

there are n number of ways.. using javascript ` var img = document.getElementById('myImage'); image.src = "path";` – Raghavendra S Nov 16 '15 at 16:23
This requires some kind of server side language unless there is a framework or something out there that does it for you. I think you should code it yourself. The code required should be relatively easy. Most people are familiar with PHP. I haven't learned node.js but if you have knowledge in node.js, then you can likely use that instead of PHP. – www139 Nov 20 '15 at 09:18

score 1 · Answer 4 · answered Nov 18 '15 at 16:13

You can use javascript / jQuery:

<script type="text/javascript">
    $(document).ready(function(){
        var userName = getUserNameValue;
        document.getElementById("<%= loginImg.ClientID %>").src = "http:bucket.amazonaws.com/" + userName;
    });
</script>

with html:

<img id="loginImg" src="default.img" />

score 1 · Answer 5 · answered Nov 19 '15 at 22:46

1

You should be able to handle this like a simple 'insert your name here' kind of Hello World exercise.

Since the user is logged in, you should have at least some sort of information from the user, or can get it - username, first/last name, uniqueID, etc. Ideally when the user logs in, your server will provide you with an image filename, but whatever.

Store that uniqueID into a variable in your JS. This will be used to build your URL in JS.

Then, have the root path of your images in a separate variable.

var uniqueID = 'avatar_e2fbfbcbb52d_128'; // from login
var urlPrefix = 'http://www.tizag.com/pics/htmlT/';
var imageURL = urlPrefix + uniqueID + '.gif';

var imgNode = document.createElement("IMG");
    imgNode.src = imageURL;
    document.getElementById('imageDiv').appendChild(imgNode);

Then, in your HTML,

<div id='imageDiv></div>

answered Nov 19 '15 at 22:46

AndrewF

148
8

Good answer, but how do I get "var uniqueID = 'avatar_e2fbfbcbb52d_128'; // from login" into my HTML page ? Can you help with taking hard-coding uniqueID out of the example ? – JavaDeveloper Nov 23 '15 at 17:28
@JavaDeveloper How do you login your user currently? Or have you not implemented that part yet? If you have, you should get some sort of -something- back from your login script - for example on SO when you login it displays your username - that username had to have been returned from the server somehow. I'm being pretty vague on that part, I admit, but even if you take their login username, and after they successfully input their username/password, you would at least have that :) – AndrewF Nov 25 '15 at 15:49
@JavaDeveloper And I've never used JSP, so I'm not sure where that would fit in, sorry! – AndrewF Nov 25 '15 at 15:50

score 1 · Answer 6 · answered Nov 20 '15 at 17:26

I can tell you the approach since you don't have a code to edit or look into.

You can have an ajax call to your server once the user logged in, get the image URL from there or if you are having any back-end language then get the url from there.

Now the hard part, assigning the URL to the img source tag, so if you are doing the ajax call just store the data(URL) into the JavaScript variable and give img src as that variable, if you are doing it using server side language then also you can do the same, different languages have different way to do it and you need to google it out, or you can have the hidden field with id, assign that hidden field that value (URL) in your JSP or ASP page and use that in the img src.

Hope the approach works. I am a dot net developer and you are java developer so can't tell you the exact code.

score 0 · Answer 7 · answered Nov 18 '15 at 09:42

0

Its very simple just try this out. I have added your image path just run this code.
<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="http://www.tizag.com/pics/htmlT/sunset.gif" style="width:304px;height:228px;">

</body>
</html>

answered Nov 18 '15 at 09:42

Darshan Mothreja

506
4
13

How to add images in an html file?

7 Answers7