如何使用 jquery 將圖像顯示到 html 文件？ （一些 php 和 xml）

Question

我有一個名為“ LaptopsImages ”的圖像文件夾。

在我的名為 notebooks.php 的文件中，我有一個包含不同筆記本電腦的數組列表，其中包含以下變量：標題、品牌、價格、描述、規格和圖片名稱。 我的數組列表轉換為 XML DOM 樹。

在名為 product.html 的文件中，我編寫了一個代碼，將每個產品數據放入變量中並顯示出來：

var title = $theProduct.find('title').text();
var brand = $theProduct.find('brand').text();
var price = $theProduct.find('price').text();
var description = $theProduct.find('description').text();
var spec = $theProduct.find('spec');
var imageFilename = $theProduct.find('picture').text();

document.getElementById("title").innerHTML=title
document.getElementById("brand").innerHTML=brand
document.getElementById("price").innerHTML=price                        
document.getElementById("description").innerHTML=description
document.getElementById("spec").innerHTML=description

我已經完成了將每個產品數據顯示到我的 html 中，除了每台筆記本電腦的圖片。 有什么辦法可以用我的變量中已有的名稱顯示圖片？ 假設圖片的名稱為“ 0001.jpg , 0002.jpg ”等。

每張圖片都可以從： var imageFilename=$theProduct.find('picture').text();

Answer 1

document.getElementById("picture").src = imageFilename

如果有帶有 id picture的<img>標簽

Answer 2

如果您使用 jquery，您可以執行以下操作：

$("#picture").attr("src", imageFilename);

Answer 3

document.getElementById('myImage').src = imageFileName;

如果您需要 ImageFileName 中的名稱，則可以使用：

name= imageFileName.substring(0, imageFileName.length - 4);/*to chop off .JPG*/

使用jQuery：

$("#myImage").attr("src", imageFilename);

Answer 4

document.getElementById("price").innerHTML= "<img src=\"" + imageurl+ "\">";

您可以使用此代碼在內部 div 中顯示完整圖像，其中 div id 是價格