使用javascript将图像显示到html页面

Question

我的目的是使用javascript在html页面上显示图像，图像位于文件夹中，图像id存储在表中但没有显示，如下所示

$(document).ready(function(e) {
  var id = 12
  $.get("http://localhost/myci/public/route/imageview/" + id,
    function(data, status) {
      if (data) {
        let images = $.parseJSON(data);
        images = images[0];
        imageId = images['imageId'];
        $('#mysnap').html('<img src="C:/xampp/htdocs/myci/public/uploads/' + imageId + '" height="100" width="100" alt="">');
      }
    });
});

<div id="mysnap"></div>

Answer 1

Web 浏览器通常不允许您读取网站上的文件系统。

由于您已经在运行本地 Web 服务器，因此您可以通过其 Web URI 而不是系统上的绝对文件路径来访问

uploads/

目录。

将图片 URL 中的

C:/xampp/htdocs

更改为

http://localhost

。

$('#mysnap').html('<img src="http://localhost/myci/public/uploads/' + imageId + '" height="100" width="100" alt="">');

或者，您可以像这样编写 jQuery 代码，这可能会让您如何定义

<img>

元素变得更加明显。

$('<img>')
  .attr('src', "http://localhost/myci/public/uploads/" + imageId)
  .attr('width', 100)
  .attr('height', 100)
  .attr('alt', "")
  .appendTo('#mysnap')