1월 25, 2021
Articles
댓글이 없습니다

Wamp 로컬 호스트에서 제공되는 모바일 브라우저에 표시되지 않는 행 배경 이미지

localhost에서 wampserver를 사용하여 웹 사이트를 개발 중이며 모바일에서 내 사이트를 보려고합니다. 내 로컬 네트워크에서.

Settings > General의 홈 및 사이트 URL을

http://localhost/site/wordpress

받는 사람

http://ip/site/wordpress

또한 벨벳 블루스 URL 플러그인을 사용하여 내 이미지 등을 localhost에서 내 IP로 업데이트했습니다.

홈페이지 배경 행 이미지를 제외하고 내 사이트의 모든 이미지가 모바일에 표시됩니다. 크롬 개발자 도구에서 URL을 확인했는데 URL 경로가 표시되는 이미지와 동일합니다. 어떻게 진행해야할지 모르겠습니다.

어떤 도움이라도 좋을 것입니다.

댓글

답변

상대 경로는 CSS 파일에서 사용될 때 다르게 작동합니다. 동작은 여전히 동일하며 경로는 여전히 상대적이지만 인간에게는 혼란스러워 보일 수 있습니다.

이미지에 다음과 같은 경로를 사용하는 경우 : 

<img src="/path/image.jpg"/>

브라우저는 폴더, 현재 웹의 루트에 있습니다. 하지만 CSS 내에서 동일한 값을 사용하는 경우 : 

background-image: url( "/path/image.jpg" );

이야기는 다릅니다. 브라우저는 현재 URL이 아닌 스타일 시트 가있는 위치를 기준으로 path 폴더 내부를 찾습니다. 따라서 스타일 시트가 다음 위치에있는 경우 

www.example.com/wp-content/themes/twentyseven/

그런 다음 브라우저는 다음을 찾습니다. 

www.example.com/wp-content/themes/twentyseven/path/image.jpg

존재하지 않습니다. 따라서 스타일 시트의 경로에 상대적인 CSS 경로를 작성하는 것이 중요합니다.

더 자세한 내용을 보려면 여기 .

댓글

  • 확인하기 만하면됩니다. if background-image url ( ip / site / wordpress / wp-content / uploads / 2017 / 06 / image.jpg ) 내 스타일 시트는 C : \ wamp64 \ www \ site \ wordpress \ wp-content \에 있습니다. themes \ theme \ style.css 파일 경로 C : \ wamp64 \ www \ site \ wordpress \ wp-content \ themes \ theme \ site \ wordpress \ wp-content \ uploads \ 2017 \ 06 \ image.jpg를 만들어야합니까? ?
  • 아니요. 먼저 브라우저에 ip/site/wordpress/wp-content/uploads/2017/06/image.jpg를 입력하고 열리는 지 확인합니다. 열렸 으면 '' (예 : background-image url('URL')) 또는 http://를 ip 앞에 추가하세요.
  • 나는 브라우저에서 해당 경로를 입력하면 열립니다. 개발 도구에서는 ip 앞에 http : //가 있지만 따옴표로 묶여 있지 않습니다. 따옴표가 부족함에도 불구하고 내 localhost 웹 사이트에는 배경 이미지가 표시되지만 모바일은 표시되지 않습니다. 감사합니다.

답변

문제는 img src 또는 배경 이미지 URL이 아니 었습니다. 아파치와 방화벽을 사용합니다. 왜 그런지 모르겠지만 http.vhosts.config 파일을 변경하고 wamp 서버를 새로 고친 다음 Wamp에 대한 방화벽 설정을 해제하면 이미지를 볼 수 있습니다. 방화벽을 변경 한 다음 Apache를 변경하는 다른 방법으로 수행하면 이미지를 볼 수 없습니다.

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다