替换给定的 <img> 源答案

【问题标题】：Replace given <img> source替换给定的 <img> 源
【发布时间】：2011-11-04 03:48:58
【问题描述】：

我使用 Google Weather API 制作了一个插件，我目前正在从 Google 的 API 中提取图像。在阳光明媚的日子里，我拉http://www.google.com//ig/images/weather/sunny.gif。

我正在寻找一种方法，以便在拉取 Sunny.gif 时，将其替换为我选择的图像。

用 jQuery 或其他方式可以吗？

非常感谢

【问题讨论】：

您如何检索数据？
我可能会将您的问题重新标记为 PHP 而不是 javascript 和 jQuery。您需要在服务器端而不是客户端编辑该数据。
这就是我的出发点：google.co.uk/ig/api?weather=london ... 你认为最好在 PHP 中做一个集合，当 img = Sunny.gif 时，显示 customunny.gif 之类的？
如果您要替换从数据源服务器端收到的字符串，那么可以。在那里进行更换总是更好。将它放在客户端意味着您可能会出现闪烁（除非您正在处理它），最坏的情况是您有一个不需要的服务器请求。

标签： javascript jquery google-weather-api

【解决方案1】：

$("#my_image").attr("src","http://www.myimagepath.com/image.jpg");

【讨论】：

我想到了那位先生，但是每天都有相同的课。无法每天设置不同的班级或 ID。
如果您有 7 天的预报，并且想了解每一天的图像？

【解决方案2】：

取决于您接收/传递图像的方式，只需将其设置为变量并检查即可。这是这个简单问题的简单/懒惰的解决方案，如果你的问题更复杂，你可以把它变成一个检查和替换阳光、暴风雨等的函数......

if (img === "http://www.google.com//ig/images/weather/sunny.gif") {
  img = "myownimage.gif";
}

PHP/JS 反模式：

<?php if ($image === "http://www.google.com//ig/images/weather/sunny.gif"): ?>
  <script type="text/javascript">
    $("#image").attr('src', 'foo.gif');
  </script>
<?php endif; ?>

但老实说，如果您使用 PHP 接收图像，那么我只需在服务器端对其进行操作并将其显示给客户端，而不是让 JavaScript 来处理...

<?php
if ($image === "http://www.google.com//ig/images/weather/sunny.gif") {
  $image = 'foo.gif';
}
?>

<img src="<?php echo $image ?>" alt="my sunny day image" />

【讨论】：

喜欢的东西就是我想要的。你可以设置一个类。喜欢：如果 ($('.day img') img == "google.com//ig/images/weather/sunny.gif") {} ???
如果您在 CSS 中将图像设置为背景图像，您可以设置一个类。
不可能，每天都有相同的班级，不同的背景图片。
没关系。在 JavaScript 中，您可以提取图像的 src 并检查是否有阳光/下雨/多云/等... document.getElementById('image').src 会给您它的 src，然后您可以使用函数 indexOf确定是晴天还是什么的。

【解决方案3】：

文档中有一个实时的document.images 集合，其中包含所有img 元素。您可以根据您喜欢的任何逻辑有条件地更改任何特定图像的 src 属性：

var image, images = document.images;

for (var i=0, iLen=images.length; i<iLen; i++) {
  image = images[i];
  if (image.src == 'whatever') image.src = 'new value';
}

您可能还想访问图像的 parentNode 及其一些属性。

但在我看来，这在服务器上做得更好。

【讨论】：