jquery - 如何使用 ajax 代码 .load() 在 div 层（如 html 页面）中加载/打开图像？

Question

我有这段代码，我从 w3schools 直接复制来测试它：

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("images/sketchbook/thumb/babymat_thumb.jpg");
  });
});

在另一个 div 中打开图像。它适用于 html 文档，但我想知道是否可以修改此代码以打开图像？我试图对它做的任何事情似乎都不起作用。（相反，我得到了一堆代码，比如当你在记事本或 Word 中打开图像时）

已解决- 我曾经“附加”下面给出的代码，但以“>”而不是“/>”结束 img src，因为否则它不会工作

Answer 1

尝试

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").append('<img src="images/sketchbook/thumb/babymat_thumb.jpg" />');
  });
});

Answer 2

如果您只是想“平稳/即时”加载图像，请尝试

$(document).ready( function() {
  $("button").click (function() {
    $("#div1").append('<img src="img/01/02/example.png" />');
  });
});

如果您尝试通过 AJAX 加载它，请记住。出于安全目的，您只能从 SAME DOMAIN 加载内容。由于您是在本地开发，因此您不能使用本地文件协议。试试下面的。

$(document).ready( function() {
  $("button").click( function( ){
    $("#div1").load("file:///C:/Users/NOPE/Desktop/photo%203.JPG");
  });
});