CSS 및 JQuery : 이미지 이름에 공백이 있음 url()의 코드 끊어짐

미리보기 이미지 위에 마우스를 올리면 더 큰 이미지 버전을 표시 할 페이지가 있습니다.CSS 및 JQuery : 이미지 이름에 공백이 있음 url()의 코드 끊어짐

$(document).ready(function(){ 

    $('img').hover(function() { 

    var src = $("#im" + this.id).attr("src"); 
    $('#viewlarge').css('backgroundImage','url(' + src +')'); 
    return false; 
    }); 

});

내가 사용하는 이미지는, 그러나, 비슷한으로 이미지를 "생성"하는 루비 스크립트에 의해 생성됩니다 : 내가 ID와 jQuery 코드가있는 'DIV'을 가지고

은 다음과 같습니다 다른 이드. 그러나 때로는 내부에 "공백"이있는 사진이 업로드됩니다. 내 개발자 도구는 백그라운드 이미지가 올바르게 설정되지 않았지만 이미지 경로가 정확하고 브라우저가 이미지를 찾는 데 문제가 없다고 알려줍니다.

내 질문에, 어떻게 든 URL 'src'를 위생 처리 할 수 있습니까? 그래서 공백이 문제가되지 않습니까? 나는이 서버 측을 알고 있지만 아직 JQuery/JS로이 작업을 수행하는 방법을 알고 싶다.

감사합니다.

출처

2010-05-18 Shyam

공백은 URI에서 유효하지 않습니다. 그들은 %20으로 인코딩되어야합니다.

src.replace(/ /g, '%20') 또는 더 일반적으로는 encodeURI(src) ~ % - URI에서 유효하지 않은 모든 문자를 인코딩 할 수 있습니다. encodeURIComponent(src)이 더 일반적이지만 src이 하나의 상대 파일 이름 일 경우에만 작동합니다. 그렇지 않으면 /을 인코딩하고 경로는 작동하지 않습니다.

그러나 실제 문제은 원래 img src이 깨져서 오류를 수정하는 브라우저 픽스 업 덕분에 만 작동한다는 것입니다. 페이지를 생성하는 Ruby 스크립트를 수정해야합니다. 경로에 포함하기 전에 파일 이름을 URL 인코딩해야합니다. 공간 이상으로 문제를 일으킬 수있는 문자가 더 많습니다.

Pekka가 말한 것처럼 url(...) 값의 URL을 따옴표로 묶어야합니다. URL없이 많은 사람들이 빠져 나올 수 있지만, 일부 문자는 \ - 에코셔야합니다. 큰 따옴표를 사용하면이를 피할 수 있습니다 (URL 자체에 큰 따옴표를 사용할 수 없음).

출처

2010-05-18 10:28:00 bobince

+1, 내 대답에'encodeURI'와'encodeURIComponent'가 섞여 있습니다. –

+1, 명확한 설명에 감사드립니다. 나는 이것을 시도 할 것이다. – Shyam

이것을 보여주기 위해 간단한 자바 스크립트 예제를 작성할 수 있습니까? – user3629945

를 사용하여 자바 스크립트 encode 기능

당신의 'src'인코딩하는 일예 W3C specs에 따라,

$('#viewlarge').css('backgroundImage','url("' + src +'")');

을하지만, 흰색 :

$('#viewlarge').css('backgroundImage','url(' + encode(src) +')');

난 당신이 또한 도움이 자바 스크립트 'escape'기능뿐만 아니라

$('#viewlarge').css('backgroundImage','url(' + escape(src) +')');

출처

2010-05-18 10:20:21

더 이상 사용되지 않습니다. encodeURIComponent 사용 – Quentin

유니 코드 지원이 부족하여'encode'가 사용되지 않습니다. 'encodeURI'와'encodeURIComponent'가 권장됩니다. –

encodeURI, 어떻게 사용할 수 있습니까? encode() 메소드와 동일합니까? – Shyam

URL을 주변에 추가 따옴표를 사용 할 수 있다고 생각 공백을 이스케이프해야하므로 ~~@Andy E의 머리~~ @bobince가 제공하는 URL 인코딩 솔루션이 가장 안전합니다.

출처

2010-05-18 10:20:34

변수에 대괄호가 포함 된 경우에만 도움이됩니다. 질문은 공백이 문제임을 나타냅니다. – Quentin

@David - 잘못되었습니다. +1을 오프셋합니다. –

+1 - 나는이 제안을 [내 대답] (http://stackoverflow.com/questions/2856294/css-and-jquery-spaces-inside-image-name-break-code-of-url)에 추가 할 예정이었습니다./2856309 # 2856309) 당신이 그것을 올렸을 때까지. –

첫째, 왜 클라이언트가 이미지의 이름을 결정하게합니까?
둘째, 왜 당신은 그들을 위생 처리하지 않았습니까? 당신은 내가 그들의 파일 이름에 공백이있는 이미지를 허용하지 않을

출처

2010-05-18 10:21:00

1. 파일 경로가있는 무서운 큰 데이터베이스가 있기 때문에. 이것을 마이그레이션 문제라고 부르 자. 2. 나는 대체 앱을 개발 중이다. 3. 나는 n00b이고 그 밖의 무엇을 추가 할 수 있습니까?) – Shyam

멋진 사이트입니까? 내가 잘못된 형식의 파일을 업로드하고 자바 스크립트를 페이지에 삽입하고 사용자 로그인을 도용하거나, 세션을 택시 오버하거나 계정을 도용하거나, 일부 데이터를 파괴하거나, 그렇지 않으면 비즈니스 서사와 같은 고통과 비용을 초래할 것입니다. 우! –

* 실례합니다. 그러나 누군가는 할 수 있었다! –

(A ~ 20 %로 공간을 켜 것)을 HTML로 쓸 때 셋째

, 난 당신이 URL을에는 urlencoding되지 않습니다 의심 업로드 될 - 나에게 좋은 연습 같지 않습니다.

출처

2010-05-18 10:22:32 matpol

나는 그것을 지금도 강요하고있다. – Shyam

당신이 이미 답변을 선택했음을 알고 있지만, 괄호로 파일 이름을 처리하는 동안 다른 문제가 발생했기 때문에 Pekka의 솔루션을 개선하고 가장 적합한 솔루션을 제공하고자합니다.

$("#viewlarge").css("background",'url(' + "'" + url+ "'" + ')');

도움이 되었기를 바랍니다.

출처

2017-03-30 05:07:53

CSS 및 JQuery : 이미지 이름에 공백이 있음 url()의 코드 끊어짐

답변

관련 문제