如何使用 jquery 将图像显示到 html 文件？（一些 php 和 xml）答案

【问题标题】：How to display images to html file using jquery? (some php and xml)如何使用 jquery 将图像显示到 html 文件？（一些 php 和 xml）
【发布时间】：2018-03-04 04:03:37
【问题描述】：

我有一个名为“LaptopsImages”的图片文件夹。

在我的名为laptops.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();

【问题讨论】：

标签： javascript php jquery html image

【解决方案1】：

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

如果有一个<img> 标签，ID 为picture

【讨论】：

我已经这样做了，现在我还有一个问题。我的本地服务器正在尝试查找图片，但它们位于子文件夹中。有什么方法可以指定查看这个文件夹的方式吗？该文件夹称为“LaptopsImages”。另外，当我从控制台检查时，我看到了这个：GET localhost:8080/0001.jpg 404 (Not Found)
这是您用于提供图像的方法的问题，而不是 HTML、CSS 或 JS
不用担心。我刚刚找到了解决方案。感谢您的建议。

【解决方案2】：

如果你使用 jquery，你可以这样做：

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

【讨论】：

【解决方案3】：

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

如果您需要 ImageFileName 中的名称，则可以使用：

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

使用 Jquery：

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

【讨论】：

【解决方案4】：

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

您可以使用此代码在内部 div 中显示完整的图像，其中 div id 是价格

【讨论】：