카테고리 없음
HTML Input Type Image Src 사진깨짐, 사진 x 박스
Canyi
2022. 9. 30. 12:09
<html>
<head>
<title>폼</title>
</head>
<body>
<form method="get" action="https://www.naver.com">
ID: <input type="text" name = "my_id" size="10" maxlength="10" value="id를 입력하세요">
<p></p>
PW: <input type="password" name = "my_pw" size="10" maxlength="10" value = "1234">
<p></p>
<input type="submit" value="submit전송">
<input type="button" value="button전송">
<p></p>
<input type="image" src="/image/143854_149286_5624.png" alt="이미지버튼">
</form>
</body>
</html>
이유:
1. 파일의 대소문자를 틀린경우
2. 파일의 경로가 잘못된 경우
3. 코드를 저장하지 않은 경우
나같은 경우는 파일의 경로를 잘못 입력하였다....
/image/143854_149286_5624.png
image/143854_149286_5624.png
이두 경로의 차이점은 무었일까....?
위 두가지의 코드의 차이점은? /로 시작하게 되면 이전디렉토리로 이동한 후 파일을 찾기 때문에 원본소스폴더안의 images 폴더를 찾는것이 아닌 원본소스폴더 상위 디렉토리에서 images폴더를 찾게되는 것이다.
따라서 절대경로방식으로 쓸때 올바른 경로를 써야 한다. 위와같이image/143854_149286_5624.png 로 쓰거나 A:\FrontEnd\HTML_CSS\image 와 같이 전체주소를 적어주어야 올바르게 출력이 된다. 직접 해보자
<html>
<head>
<title>폼</title>
</head>
<body>
<form method="get" action="https://www.naver.com">
ID: <input type="text" name = "my_id" size="10" maxlength="10" value="id를 입력하세요">
<p></p>
PW: <input type="password" name = "my_pw" size="10" maxlength="10" value = "1234">
<p></p>
<input type="submit" value="submit전송">
<input type="button" value="button전송">
<p></p>
<input type="image" src="image/143854_149286_5624.png" alt="이미지버튼">
</form>
</body>
</html>
<html>
<head>
<title>폼</title>
</head>
<body>
<form method="get" action="https://www.naver.com">
ID: <input type="text" name = "my_id" size="10" maxlength="10" value="id를 입력하세요">
<p></p>
PW: <input type="password" name = "my_pw" size="10" maxlength="10" value = "1234">
<p></p>
<input type="submit" value="submit전송">
<input type="button" value="button전송">
<p></p>
<input type="image" src="A:\FrontEnd\HTML_CSS\image\143854_149286_5624.png" alt="이미지버튼" width="400" height="400">
</form>
</body>
</html>직접 경로를 긁어서 넣음..
