图像高度和宽度的“语法错误，无法识别的表达式”答案

【问题标题】："Syntax error, unrecognized expression" for height and width on image图像高度和宽度的“语法错误，无法识别的表达式”
【发布时间】：2015-10-08 16:14:40
【问题描述】：

我无法使用以下代码获取图像的高度和宽度。我不断收到Uncaught Error: Syntax error, unrecognized expression: ...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 进行了测试。同样的错误。

等问题解决后，我会删除上面代码中的链接！

我该如何解决这个问题？

【问题讨论】：

是什么让您认为 URL 是有效的 CSS 表达式？
这是因为你在做$(url).naturalHeight() 这不是一个有效的选择器，要么添加anm id 或class 或一个图像标签来获取
@Clive：什么？我只将大图像直接链接到我的服务器。在我正在开发的网站上，我使用的是/blog/images/uploaded/large/p1010352.jpg，而不是完整的 URL。
@TusharGupta 哦。所以我错过了什么......
您正在将字符串中的 URL 传递给 jQuery 函数，该函数需要选择器表达式来定位 DOM 中的元素。 URL 不是一个有效的值，希望有明显的原因

标签： jquery css image height width

【解决方案1】：

您的代码中的错误是您将 url 作为类选择器传递。

这是一个修复：

更改以下内容：

var image_src = 'http://nhagyavi.myftp.org/blog/images/uploaded/large/p1010352.jpg';
var image_height = $(image_src).naturalHeight();
var image_width = $(image_src).naturalWidth();

到

var image_src = 'http://nhagyavi.myftp.org/blog/images/uploaded/large/p1010352.jpg';
var temp_img = document.createElement("img");
temp_img.src = image_src;
var image_height = $(temp_img).height();
var image_width = $(temp_img).width();

【讨论】：

【解决方案2】：

这是因为你在做$(url).naturalHeight() 这不是一个有效的选择器，要么添加一个 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=''/>

【讨论】：

非常感谢工作演示和解释:)
@ErikEdgren 欢迎您 :)

【解决方案3】：

您似乎试图将图像源用作选择器并以这种方式动态确定图像的高度和宽度。这是行不通的，因为 URL 不是有效的 jQuery 选择器（有充分的理由；这会带来令人讨厌的安全隐患）。

您想要做的是要么在服务器端获取高度和宽度，要么将图像加载到隐藏的 div 中，然后确定其尺寸。

【讨论】：

谢谢。在您的回答和 Tushar 的评论之后，我睁大了眼睛：)