Question

我正在建立一家在线商店来出售杂志，所以我需要展示杂志的图像。为此，我想显示与发行杂志的公司网站相同的图像。

为此，使用绝对路径很容易，就像这样：

<img src="http://www.remotewebsite.com/image.jpg" />

但是，在我的情况下这是不可能的，因为每当有新杂志时图像的名称都会更改。

在Javascript中，可以使用以下代码获取图像的路径：

var strImage = document.getElementById('Image').src;

但是，如果图像在另一个HTML页面中，是否可以使用类似的方法获取图像的路径？

Answer 1

假设您知道如何在杂志网站的DOM中找到正确的图像（否则，请忽略它）：

我将不详述任何这些步骤（周围已经有很多SO答案），尤其是因为您还没有描述技术部分可能遇到的特定问题。

Answer 2

可以，但是效率低下。您将需要执行一个请求以加载该另一页面的所有HTML，然后在该HTML中找到您要查找的图像。

可以实现（使用XMLHttpRequest或fetch），但我可能会尝试找到一种更有效的方法。

Answer 3

您所要求的在技术上是可能的，并且其他答案已经详细说明了如何实现此目的。

在这个答案中我想讲的是，鉴于您所描述的要求，您可能应该构建此架构。请记住，我所描述的是执行此操作的一种方法，当然还有其他正确的方法。

在将要运行应用程序的服务器上创建一个数据库。一个简单的MySQL数据库就可以使用，但是您可以使用任何东西。创建一个名为杂志的表，该表的列为 url 。您的代码将从该数据库中提取URL。只要杂志的URL发生更改，就只需更新数据库，而无需更改代码本身。

您的前端代码需要某种方式来访问数据库。一种可能的解决方案是REST API。此代码将查询数据库以获取最新值（以您的情况为杂志URL），并使它们可用于您的网页。这可以用多种不同的语言/框架来完成，这是good tutorial，用于在Node.js中进行类似的操作并表达（这是我个人使用的）。

最后，您的前端代码需要调用REST API以获得更新的URL。这需要使用某种基于JavaScript的语言来完成。 jQuery会让事情变得非常简单，就像这样：

$(document).ready(function() {
  $.Get("http://uri_to_your_rest_api", function(data) {
    $("#myImage").attr("scr", data.url);
  }
});

假设您有这样的HTML：

<img id="myImage" src="">

然后就可以了-您有一个网页可以从数据库中动态提取图像源。

现在，如果您只是将脚尖投入到Web开发中，这似乎有些令人难以置信。但我向您保证，从长远来看，尝试从HTML页面解析代码会更容易：）