イメージをhtmlファイルに追加するには？私はhtmlと画像上の記事を読んだ

いつでも、私はこのようにアンカータグを見てきました：イメージをhtmlファイルに追加するには？私はhtmlと画像上の記事を読んだ

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

しかし、私の場合、私はAWS-S3で画像を保存していると私は画像を読んでいますS3から。 "http://www.tizag.com/pics/htmlT/sunset.gif"のような先がありません

画像がS3に保存され、画像へのパスがわからない場合、画像をHTMLページに埋め込む最も一般的な方法は何ですか？

私の質問が混乱している場合は、別の方法で質問します。

私はプロジェクトを構築していますが、これは簡単です。ユーザーがログインするたびに、「ようこそ」と言っているページが表示され、下のウェルカムノートはプロフィール画像です。

しかし、私は10人のユーザーがいると仮定します。これらの10人のユーザーのそれぞれは、イメージと異なるURLを持ちます。

例：ユーザー2

などのために、ユーザ1

<img src = "http:bucket.amazonaws.com/USER2'>ため

<img src = "http:bucket.amazonaws.com/USER1'>。

画像への実行時とパスがログインする人に依存しているまで、だから私は、表示される画像はnot knownある。画像srcが一定ではなく、依存柔軟にできるように、私のHTMLページがスマートにする方法誰がログインするのですか？私は何ができるJSPで

SOLUTION、THANKSするので、多くの回答：

<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

：HTMLで

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

サーバー側のプログラミング言語の種類を生成する各ユーザーのために画像のパスを動的に変更します。とにかく、ユーザーがログインするための設定があります。そのためには、PHP（Laravel、Wordpress、CodeIgniter）、Java（Spring）、Ruby（Rails）、Python（Django）などのサーバー側スクリプト言語のフレームワークがあります。

ユーザーがログインすると、ログインスクリプトはユーザーを検証し、特定のhtmlページを表示します。また、ユーザーの名前と特定のイメージを表示する必要があります。 PHPやRuby on Railsでは、実際のPHPコードやルビコードをHTMLに埋め込むことができます。

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

それでは私： - ：Ruby on Railsには

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

、このようなこのようなジャンゴ、Pythonで

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

このようなPHPで

、あなたが使用しようとしている、またはすでに使用しているサーバー側スクリプト言語に精通していることをお勧めします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

ああ、ご清聴ありがとうございます。おそらく、Javascriptを使って画像タグのsrc属性を動的に設定したいと思うでしょう（注：私はこれに関する経験はありません）。多分この[あなたの質問]（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の中に同じパスを持つことは、それは一般的なすべてのために作ると、その後の変数を入れて、応じですそこからあなたのユーザーIDのイメージを取得します。ユーザー

出典

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を使用することができますに従って <img src = "http:bucket.amazonaws.com/<?php echo $userimg; ?>'よう

またはデータベースからIMGパスをフェッチ/ jQueryの：あなたは、いくつかの必要

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

出典

2015-11-18 16:13:05 deebs

単純な「ここにあなたの名前を挿入する」ような、こんにちはワールドのエクササイズのように扱えるはずです。

ユーザはログインしているので、ユーザからの何らかの情報が必要です。または、ユーザ名、名/姓、固有IDなどを取得できます。ユーザがログインすると、サーバはイメージファイル名を提供しますが、何でも構いません。

JS内の変数にそのuniqueIDを格納します。これは、JSでURLを構築するために使用されます。

次に、イメージのルートパスを別の変数に設定します。編集またはに見て、コードを持っていないので、

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ページにはどうすればよいですか？この例の中でハードコードのuniqueIDを取ることを手伝ってもらえますか？ – JavaDeveloper

JSPを使用できますか？ – JavaDeveloper

@JavaDeveloper現在どのようにあなたのユーザにログインしていますか？それともまだその部分を実装していないのですか？もしあなたが持っていれば、あなたのログインスクリプトから何らかの形を取るべきです - 例えば、あなたがログインしたときにあなたのユーザー名を表示する - そのユーザー名は何とかサーバーから返されなければなりません。私はその部分でかなり曖昧ですが、あなたがログインユーザ名を取得しても、ユーザ名/パスワードを入力しても、少なくともそれはあります:) – AndrewF

は、私はあなたのアプローチを伝えることができます。

ユーザーがログインするとサーバーにajaxを呼び出すことができます。そこから画像URLを取得するか、バックエンド言語を使用してそこからURLを取得します。

難しい部分ですが、imgソースタグにURLを割り当てるので、ajax呼び出しを行っている場合は、JavaScript変数にデータ（URL）を格納し、その変数としてimg srcを指定するだけですサーバーサイドの言語を使用して同じことをすることもできますし、異なる言語には異なる方法があり、Googleでそれを行う必要があります。また、idで隠しフィールドを持つこともできます。またはASPページを開き、それをimg srcで使用します。

アプローチがうまくいきます。私はドットネットデベロッパーであり、あなたはJava開発者であり、正確なコードを教えてくれません。

出典

2015-11-20 17:26:29 Parshii

イメージをhtmlファイルに追加するには？私はhtmlと画像上の記事を読んだ

答えて

関連する問題