Как добавить изображения в html-файл?

В любое время я прочитал статью о HTML и изображения, я видел якорь тег, как это:Как добавить изображения в html-файл?

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

Однако, в моем случае я хранить изображение в AWS-S3 и я читаю изображение от S3. Это, у меня нет заранее, есть путь, как «http://www.tizag.com/pics/htmlT/sunset.gif»

Итак, какова наиболее распространенная техника встраивания изображения на страницу html, когда изображение хранится в S3, а путь к изображению неизвестен?

В случае, если у меня возникли вопросы, я задам вопрос по-другому.

Я строю проект, который прост. Всякий раз, когда пользователь регистрируется, он получает страницу с надписью «Добро пожаловать», и ниже приветствуется примечание - это изображение профиля.

Но, предположим, у меня 10 пользователей, у каждого из этих 10 пользователей будет другой URL-адрес изображения.

например:

<img src = "http:bucket.amazonaws.com/USER1'> для пользователя 1

<img src = "http:bucket.amazonaws.com/USER2'> для пользователя 2

и так далее.

Так что образ Я буду отображать это not known до времени выполнения и путь к изображению не зависит от того, кто входит в системе. Как сделать мой HTML страницу умной, так что ЦСИ образ не является постоянной и может быть гибкими в зависимости кто входит в систему?

РЕШЕНИЕ В JSP, который я мог бы сделать, БЛАГОДАРЯ СТОЛЬКО ОТВЕТЫ:

<body> 

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

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

</body>

Этот код JSP вызывается из сервлета.

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

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

источник

2015-11-11 JavaDeveloper

Не уверен, что вы имеете в виду, но если страница html и изображение находятся в той же или подобной папке, вы можете использовать относительные пути: ''. В противном случае вы можете использовать некоторую технику, которая отображает ваши html-страницы и использует местозаполнитель для пути до тех пор, пока он не станет известен. – Marged

Итак, как бы выглядел рабочий процесс? скачать изображение по известному пути и использовать этот путь в html? – JavaDeveloper

Я не знаю, соответствует ли это вашему сценарию, но если ваш html создан php (или servlet/jsp), вы можете сделать что-то вроде '" /sunset.gif /> '. Критический путь - как и когда устанавливать $ pathtos3 ;-) – Marged

Вам потребуется некоторое вид серверного языка программирования для создания пути для изображения динамически для каждого пользователя. В любом случае у вас есть настройка для входа в систему. Для этого я считаю, что у вас есть какая-то структура на некоторых сценариях на стороне сервера, таких как PHP (Laravel, Wordpress, CodeIgniter), Java (Spring), Ruby (Rails), Python (Django).

Поэтому, когда пользователь входит в систему, ваш сценарий входа в систему должен проверять пользователя, и вы будете отображать определенную страницу html. И вы должны показать имя пользователя и конкретное изображение. В PHP или Ruby on Rails вы можете вставлять фактический код PHP или ruby-код в HTML.

В PHP, например:

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

В Ruby на Rails, как это:

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

В Python - Django, как это:

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

Так что я Предположим, вы знакомы с языком сценариев на стороне сервера, который вы собираетесь использовать или уже используете и используете url, который должен быть создан на основе зарегистрированного пользователя.

источник

2015-11-19 07:03:49

Если ковш был назван my-bucket и файл изображения был назван my-image.png, то формат для URL будет http://my-bucket.s3.amazonaws.com/my-image.png.

Для доступа к файлу, тем не менее, для обеспечения доступа к этому файлу требуется политика, привязанная к вашему ведру. Ниже приведена политика, которая работает для этого примера.

{ 
    "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" 
    }] 
}

Смотрите docs для получения дополнительной информации о доступе ведра.

Также обратите внимание на то, что имя ведра должно быть совместимым с DNS для этого. См. here в разделе «Правила для именования ковша».

источник

2015-11-13 01:49:47

Вопрос заключается в запросе чего-то другого. Это не как получить изображение из ведра. Его запрос о том, как внедрить изображение в HTML, если путь неизвестен до выполнения? – JavaDeveloper

Что делать, если я не знаю до выполнения, если мне нужен my-image.png или sunset.png? – JavaDeveloper

Ох, спасибо за разъяснение. Вероятно, вы хотите динамически установить атрибут src тега изображения с помощью Javascript (примечание: у меня нет опыта с этим). Возможно, этот [вопрос SO] (http://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag) может помочь вам. –

Мое предложение:
<img src = "http:bucket.amazonaws.com/USER1'> для пользователя 1

<img src = "http:bucket.amazonaws.com/USER2'> для пользователя 2
в соответствии с вашими примерами в user1 и user2, имеющие тот же самый путь http:bucket.amazonaws.com/ сделать его общим для всех и положить переменную после этого и в соответствии от вашего идентификатора пользователя. как <img src = "http:bucket.amazonaws.com/<?php echo $userimg; ?>'

или принести IMG путь из базы данных по пользователям

источник

2015-11-16 05:28:26

Любой вариант, отличный от php? – JavaDeveloper

есть n способов ... с помощью javascript ' var img = document.getElementById ('myImage'); image.src = "path"; ' –

Для этого требуется какой-то серверный язык, если нет рамки или чего-то там, что делает это за вас. Я думаю, вы должны сами его закодировать. Необходимый код должен быть относительно простым. Большинство людей знакомы с PHP. Я не узнал node.js, но если у вас есть знания в node.js, то вы, скорее всего, будете использовать это вместо PHP. – www139

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>

источник

2015-11-18 09:42:43

Предполагается, что он уже знает, что путь .../sunset.gif. – AndrewF

Вы можете использовать JavaScript/JQuery:

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

с HTML:

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

источник

2015-11-18 16:13:05 deebs

Вы должны иметь возможность обрабатывать это как простое «вставьте свое имя здесь» в упражнение Hello World.

Поскольку пользователь вошел в систему, вы должны иметь хотя бы некоторую информацию от пользователя или можете получить его - имя пользователя, имя и фамилию, уникальный идентификатор и т. Д. В идеале, когда пользователь входит в систему, ваш сервер будет предоставить вам имя файла изображения, но что угодно.

Храните этот уникальный идентификатор в переменной в вашем JS. Это будет использоваться для создания вашего URL-адреса в JS.

Затем укажите корневой путь ваших изображений в отдельной переменной.

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);

Затем, в вашем HTML,

<div id='imageDiv></div>

источник

2015-11-19 22:46:06 AndrewF

Хороший ответ, но как мне получить «var uniqueID = 'avatar_e2fbfbcbb52d_128'; // от входа в систему на мою HTML-страницу? Можете ли вы помочь с использованием уникального идентификатора жесткого кодирования из примера? – JavaDeveloper

Можно использовать JSP? – JavaDeveloper

@JavaDeveloper Как вы входите в систему для своего пользователя? Или вы еще не выполнили эту часть? Если у вас есть, вы должны получить какой-то -что-то из вашего сценария входа в систему - например, на SO при входе в систему отображается ваше имя пользователя - это имя пользователя должно было быть возвращено с сервера каким-то образом. Я признаю, что я довольно расплывчатый, но даже если вы заберете свое имя для входа в систему, и после того, как они успешно вводят свое имя пользователя/пароль, вы бы хотя бы это сделали :) – AndrewF

Я могу вам сказать, подход, так как у вас нет кода для редактирования или заглянуть.

Вы можете получить вызов ajax на свой сервер после входа пользователя в систему, получить URL-адрес изображения или если у вас есть какой-либо внешний сервер, тогда получите URL-адрес оттуда.

Теперь сложная часть, присваивающая URL-адрес тегу источника img, поэтому, если вы выполняете вызов ajax, просто храните данные (URL) в переменной JavaScript и присваивайте img src в качестве этой переменной, если вы это делаете используя серверный язык, а также вы можете сделать то же самое, разные языки имеют другой способ сделать это, и вам нужно это сделать, или вы можете иметь скрытое поле с идентификатором, назначить это скрытое поле, значение (URL) в вашем JSP или ASP, и используйте это в img src.

Надеемся, что подход работает. Я разработчик dot net, и вы являетесь разработчиком Java, поэтому не можете сказать вам точный код.

источник

2015-11-20 17:26:29 Parshii

Как добавить изображения в html-файл?

ответ

Смежные вопросы