Заменить данный <img>источник

Question

Я сделал плагин с Google Weather API, и в настоящее время я извлекаю изображения из Google API.В солнечный день я тяну http://www.google.com//ig/images/weather/sunny.gif.

Я ищу способ, чтобы когда-нибудь sunny.gif вытащил заменить на изображение по моему выбору.

Возможно ли это с jQuery или другим способом?

Большое спасибо

Answer 1

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

Answer 2

Зависит от того, как вы получаете / передаете изображение, просто установите его в переменную и проверьте его.Это простое / ленивое решение этой простой проблемы, если ваша задача более сложная, вы можете превратить ее в функцию, которая проверяет и заменяет солнечные, штормовые и т. Д. ...

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

PHP / JS anti-pattern:

<?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" />

Answer 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 изображения и некоторым его свойствам.

Но мне кажется, что это гораздо лучше сделать на сервере.