如何在 html 文件中添加图片？答案

【问题标题】：How to add images in an html file?如何在 html 文件中添加图片？
【发布时间】：2016-02-12 22:29:24
【问题描述】：

每当我阅读有关 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。

例如：

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

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

等等。

所以我将显示的图像是not known，直到运行时，图像的路径取决于谁登录。如何使我的 HTML 页面变得智能，使图像 src 不是一个常量，并且可以根据谁登录而变得灵活？

JSP 中的解决方案，我可以这样做，感谢这么多答案：

<body>

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

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

</body>

这个 JSP 代码是从 servlet 调用的。

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

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

【问题讨论】：

不太清楚你的意思，但如果 html 页面和图像在相同或相似的文件夹中，你可以使用相对路径：<img src="./images/sunset.gif" />。否则，您可以使用一些技术来呈现您的 html 页面并使用占位符作为路径，直到知道它为止。
那么工作流程会是什么样子？在某个已知路径下载图像并在 html 中使用该路径？
我不知道这是否适合您的场景，但如果您的 html 是由 php（或 servlet/jsp）创建的，您可以执行类似 <img src="http://"<?php echo $pathtos3; ?>"/sunset.gif /> 的操作。关键路径是如何以及何时设置 $pathtos3 ;-)
@Marged 任何非 php 选项？
当然，你可以用 jsp 做同样的事情。这是您要搜索的内容吗？

标签： html image amazon-s3

【解决方案1】：

如果您的存储桶名为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。

【讨论】：

问题是要求不同的东西。它不是如何从存储桶中获取图像。它请求如何在 HTML 中嵌入图像，如果路径直到运行时才知道？
如果我直到运行时才知道我需要 my-image.png 还是 sunset.png 怎么办？
哦，谢谢你的澄清。您可能希望使用 Javascript 动态设置图像标签的 src 属性（注意：我对此没有任何经验）。也许这个SO question 可以帮助你。
html页面是如何生成的？这个 ^ 假设页面是静态的。如果页面是动态生成的，只需在页面发送到浏览器之前更改 src 属性即可。

【解决方案2】：

我的建议是：
<img src = "http:bucket.amazonaws.com/USER1'> 对于用户 1

<img src = "http:bucket.amazonaws.com/USER2'> 用户 2
根据您在 user1 和 user2 中具有相同路径的示例，http:bucket.amazonaws.com/ 使其对所有人通用并在之后放置变量，并根据您的用户 ID 从那里获取图像。喜欢<img src = "http:bucket.amazonaws.com/<?php echo $userimg; ?>'

或者根据用户从数据库中获取img路径

【讨论】：

有 n 种方式.. 使用 javascript <img src="" id="myImage"> var img = document.getElementById('myImage'); image.src = "path";
这需要某种服务器端语言，除非有框架或其他东西可以为您完成。我认为您应该自己编写代码。所需的代码应该相对简单。大多数人都熟悉 PHP。我没有学过 node.js，但如果你有 node.js 方面的知识，那么你可以使用它来代替 PHP。

【解决方案3】：

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>

【讨论】：

【解决方案4】：

你可以使用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" />

【讨论】：

【解决方案5】：

您需要某种服务器端编程语言来为每个用户动态生成图像的路径。无论如何，您确实有用户登录的设置。为此，我相信您在某些服务器端脚本语言中拥有某种框架，例如 PHP（Laravel、Wordpress、CodeIgniter）、Java（Spring）、Ruby（Rails）、Python（Django）。

因此，当用户登录时，您的登录脚本应该验证用户并且您将呈现特定的 html 页面。并且您应该显示用户名和特定图像。在 PHP 或 Ruby on Rails 中，您可以在 HTML 中嵌入实际的 PHP 代码或 Ruby 代码。

在 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 on 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。

【讨论】：

【解决方案6】：

您应该能够像简单的“在此处插入您的名字”练习一样处理这个问题。

由于用户已登录，您应该至少有一些来自用户的信息，或者可以得到它 - 用户名、名字/姓氏、唯一 ID 等。理想情况下，当用户登录时，您的服务器将提供你有一个图像文件名，但无论如何。

将该 uniqueID 存储到 JS 中的变量中。这将用于在 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>

【讨论】：

很好的答案，但是如何将“var uniqueID = 'avatar_e2fbfbcbb52d_128'; // from login” 输入我的 HTML 页面？你能帮忙把硬编码的 uniqueID 从例子中去掉吗？
@JavaDeveloper 您目前如何登录您的用户？或者你还没有实现那部分？如果你有，你应该从你的登录脚本中得到某种 -something- - 例如，当你登录时，它会显示你的用户名 - 该用户名必须以某种方式从服务器返回。我承认，我在这方面很模糊，但即使你使用他们的登录用户名，并且在他们成功输入他们的用户名/密码后，你至少会拥有它:)
@JavaDeveloper 而且我从来没有使用过 JSP，所以我不确定它适合哪里，抱歉！

【解决方案7】：

我可以告诉你方法，因为你没有要编辑或查看的代码。

用户登录后，您可以对服务器进行 ajax 调用，从那里获取图像 URL，或者如果您有任何后端语言，则从那里获取 url。

现在是困难的部分，将 URL 分配给 img 源标记，所以如果您正在执行 ajax 调用，只需将数据（URL）存储到 JavaScript 变量中，并将 img src 作为该变量，如果您正在使用服务器端语言然后你也可以做同样的事情，不同的语言有不同的方法，你需要用谷歌搜索出来，或者你可以拥有带有 id 的隐藏字段，在你的 JSP 中分配该隐藏字段的值（URL）或ASP 页面并在 img src 中使用它。

希望这种方法有效。我是 dot net 开发者，你是 java 开发者，所以不能告诉你确切的代码。

【讨论】：