Question

我正试图让我的图像在模态中更可靠/更敏感。

我从我的数据库（MySQL）中提取图像源并在模态上显示图像。

我有这段代码：

<a class='modal-trigger' href='#view-image' onclick='getImage(`<?php image source; ?>`)'></a>

之后这是我的JavaScript

    function getImage(imgsrc){
      $("#item-thumb").attr("src",imgsrc);
      var height = $('#item-thumb').height();
      if(height > '600'){
        console.log(height);
      }else{
        console.log(height);
      } 
    }

我的问题是，当我获得图像的高度时，它总是输出0.我认为脚本本身只获得空白图像，我想？有没有其他方法可以使用jQuery获取图像的维度？

Answer 1

首先，你必须使用单引号'将字符串传递给javascript，然后用后面的标记传递。

corect

<a class='modal-trigger' href='#view-image' onclick='getImage(`<?php image source; ?>`)'></a>

要：

<a class='modal-trigger' href='#view-image' onclick="getImage('<?php image source;?>')"></a>

此外，href='#view-image'的目的是什么。

您是否在点击链接或调用onclick事件时更改哈希值？

Answer 2

如果你需要获得图像高度，那么你需要在dom（文档）上渲染图像，除非你无法获得图像高度

如果你有关于数据库的图像数据，那么使用PHP

进行高度操作

list($width, $height, $type, $attr) = getimagesize("image_name.jpg");

Answer 3

在获得高度之前，您需要等待图像加载。尝试使用此代码：

$('#item-thumb').load(function () {
  console.log($(this).height());
});

如何在加载图像后获取图像的尺寸？

3 个答案: