jquery - "Syntax error, unrecognized expression"表示图像的高度和宽度

Question

我无法使用下面的代码获取图像的高度和宽度。我不断收到未捕获错误:语法错误，无法识别的表达式:...ge/p1010352.jpg。

$('body').on('click', '#view-large', function() {

    // VARIABEL
    var image = $(this).attr('data');
    var image_src = '../blog/images/uploaded/large/p1010352.jpg';
    var image_height = $(image_src).naturalHeight();
    var image_width = $(image_src).naturalWidth();
    console.log(image_height);

    // VISA & CSS
    $('.blog-image-view').show().css({
        'background-image': 'url(' + image_src + ')',
        'margin-top': '-' + (image_height / 2) + 'px',
        'margin-left': '-' + (image_width / 2) + 'px',
        'height': image_height + 'px',
        'width': image_width + 'px'
    });

});

此代码的目的是单击链接并获取所选图像的大图像( but in the demo ，我只使用链接 - 同样的问题)。我已经测试了 height、width 和 clientHeight、clientWidth。同样的错误。

当这个问题得到解决后，我将删除上面代码中的链接!

如何解决这个问题？

Answer 1

这是因为你正在做$(url).naturalHeight()这不是一个有效的选择器，请添加 anm id 或类或图像标签来获取..

我添加了一个<img> id 为 demo 的标签.

还有.naturalHeight()不是一个有效的函数，您可以使用 . prop()达到同样的效果

$(document).ready(function() {
    
    $('body').on('click', '#view-large', function() {
    
        // VARIABEL

        var image = $(this).attr('data');
        var image_src = 'http://nhagyavi.myftp.org/blog/images/uploaded/large/p1010352.jpg';
        $('#demo').attr('src',image_src);
        var image_height = $('#demo').prop('naturalHeight');
        var image_width = $('#demo').prop('naturalWidth');
        console.log(image_height);
    
        // VISA & CSS
        $('.blog-image-view').show().css({
            'background-image': 'url(' + image_src + ')',
            'margin-top': '-10px',
            'margin-left': '-10px',
            'height': image_height + 'px',
            'width': image_width + 'px'
        });
    
    });

});

.blog-image-view {
    background-color: #222222;
    display : none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="javascript:void(0)" id="view-large" data="p1010352.jpg">View</a>

<div class="blog-image-view"></div>
<img id='demo' src=''/>