2012-05-30 2 views
0

안녕하세요 최근에 내 코드에서이 버그를 발견했습니다.css html 안전한 파일 이름 그림 배경 대 이미지 태그

내가 아니라 적어도 이미지가 내가

<div style="background:url(http://www.zendez.com/beta/files/retreatphotos/larges/idretreat70/Mayacamas Ranch, Calistoga, California_ Paradise with a Purpose.jpg)" style="width:100%; height:300px"></div> 

어떤 이유 유효한 경우 알고 있나요 사용하는 경우 보여 해달라고

<img scr="http://www.zendez.com/beta/files/retreatphotos/larges/idretreat70/Mayacamas Ranch, Calistoga, California_ Paradise with a Purpose.jpg"> 

와 함께 사용하지만 유효하지 않은 경우이 링크 "http://www.zendez.com/beta/files/retreatphotos/larges/idretreat70/Mayacamas Ranch, Calistoga, California_ Paradise with a Purpose.jpg는"안전 img에 대해서는 배경이 유효하지 않습니까? 어떤 제안이라도 좋을 것입니다.

+1

[URL 인코딩 (http://www.w3schools.com/tags/ref_urlencode.asp) – Louis

+0

I가 파일명에 공간을 사용하지 않도록한다. URI에서 그것들을 % 20으로 대체하는 것이 효과적 일지 모르지만, 실제 파일에서 밑줄을위한 공백을 바꿔서 끝낼 수 있습니다. –

답변

1

http://www.zendez.com/beta/files/retreatphotos/larges/idretreat70/Mayacamas%20Ranch,%20Calistoga,%20California_%20Paradise%20with%20a%20Purpose.jpg의 URL은 아마 작동합니다 ..

내가 코멘트에 말했듯이 변경, 귀하의 URL이 제대로 urlencoded 없습니다. URL은 공백이 허용되지 않습니다. ,

background:url('http://www.zendez.com/beta/files/retreatphotos/larges/idretreat70/Mayacamas Ranch, Calistoga, California_ Paradise with a Purpose.jpg');

어느 쪽이든을 : 나는 브라우저가 IMG 태그의 잘못 작성된 SRC 속성을 처리하지만 당신과 같이 따옴표로 URL을 캡슐화하지 않기 때문에 대부분의 경우 CSS를 실패하는 방법을 알고 있으리라 믿고있어 파일 이름에 공백이 생기지 않도록 시도하면 두통이 적어집니다.

+0

음 좋은 생각이 들도록 노력하겠습니다. 잠시 후에 다시 .... .... – ncubica

+1

완벽하게 매력으로 작동합니다! :) 나는 모든 코드를 바꿀 수 없기 때문에 내 자바 스크립트에서 encodeURI를 사용했습니다. – ncubica

0

마지막 스타일이 올바르게 작동하지 않을 수 있으므로 div에 두 개의 스타일 속성을 두어서는 안됩니다.

+0

사실 CSS는 jquery 측에서 인코딩 문제가있었습니다. $ ("# id"). attr ("background", somefuncionTogetImage)); 그리고 shoul은 $ ("# id")입니다. attr ("background", encodeURI (somefuncionTogetImage())); 그리고 – ncubica

1

URL을 따옴표로 묶으십시오. 나는이 작업을 수행 할 때, 그것은 공백과 %20로 대체 공백으로 둘 다, 나를 위해 작동

background:url('http://yadda/yadda.jpg'); 

:

background:url(http://yadda/yadda.jpg); 

변경 그것을 : 즉, 당신은 ...입니다. 항상 파일 이름에 단순한 것을 유지하려고 노력하십시오. 구두점 및 공백은 파일 시스템 또는 프로그래밍 환경에서 잘못 처리 될 수 있습니다.

어쨌든 인용문은 친구입니다.

또한 스타일을 태그에 삽입하는 대신 태그에 스타일을 적용하는 것이 좋습니다. I ...을 W3 스쿨 싫어 찾아만큼

<head> 
<style type="text/css"> 
    .foo { 
    background:url=('http://yadda/yadda.jpg') no-repeat; 
    } 
</style> 
</head> 

<body> 
<p class="foo">Hello, world.</p> 
</body> 
+0

고마워,하지만 문제는 그 jquery $ .attr 메서드를 사용하여 배경 따옴표를 할당 할 수 있다고 생각하지 않기 때문에 가장 좋은 옵션은 encodeURI 메서드를 자바 스크립트로 인코딩하고 매력처럼 작동하는 것입니다. 하지만 어쨌든 좋은 연습 사용 따옴표입니다. 나는 외부의 CSS를 사용하는 것에 대해 당신과 함께하고있다. 그러나이 경우에는 디자인 문제가 아니라 ... – ncubica