Question

数据库中的图像链接以这种方式注册：

Here are sample apartment pictures {img="/path/photo1.jpg" alt="I am Photo Title"} and {img="/path/photo2.jpg" alt="I am Photo Title #2"}

在屏幕上打印时：

Here are sample apartment pictures <img src="/path/photo.jpg" alt="I am Photo Title"/> and <img src="/path/photo2.jpg" alt="I am Photo Title #2"/>

JavaScript如何改变？

我已经研究过很多关于此的问题，但我还没有找到。

Answer 1

选择img元素后，您可以直接更改src属性。例如，对于id为“my-image”的给定img元素：

<img id="my-image" src="/path/photo.jpg" alt="I am Photo Title"/>

您可以通过document.getElementById选择图片：

var img = document.getElementById('my-image');

然后直接在src元素上修改img属性：

img.src = '/my-new-img-path.jpg`

以下是更新多个图像的示例，这些图像都具有"edit-image"类

var images = document.getElementsByClassName('edit-image');
for (var i = 0; i < images.length; i++) {
  images[i].src = '/my-new-img-path.jpg';
}

Answer 2

在jquery中你可以这样写：

首先让我们通过命名它来调用来自DB的img对象＆＃39; imgObj＆＃39;例如......
然后：

＆＃13;

var imgObj = { img : 'http://via.placeholder.com/350x150', alt : 'alternative text' };

$(document).ready(function() {
  $('.img').attr('src', imgObj.img);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="#" alt="" class='img' />

＆＃13;

更新：（适用于情侣图片）

现在我将html构建为字符串（使用db中的img对象），然后将其附加到DOM。例如：

＆＃13;

var imgObj = 
[{ img : 'http://via.placeholder.com/350x150', alt : 'alternative text', class:'img-1' },
 { img : 'http://via.placeholder.com/350x150', alt : 'alternative text', class:'img-2' },
 { img : 'http://via.placeholder.com/350x150', alt : 'alternative text', clsas:'img-3' }];
 
 var htmlOutput = "";

$(document).ready(function() {
  
  for(var i = 0; i < imgObj.length; i++)
  {
      var imageElement = '<img src="#SRC#" alt="#ALT#" class="#CLASS#" />';
      htmlOutput += imageElement.replace('#SRC#', imgObj[i].img).replace('#ALT#', imgObj[i].alt).replace('#CLASS#',imgObj[i].class);
  }
  
  // Append the HTML string to the dom
  $('.img-container').append(htmlOutput);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-container"></div>

＆＃13;

使用JavaScript创建多个图像SRC元素

2 个答案: