HTML img attr() src Value 변경 / JQUERY

생활코딩

by sosorine 2024. 1. 18. 12:09

728x90

금번 HTML 작업 중 가장 어려웠던 부분이었다. 이것저것 막 하다 보니 얻어걸려 구현했던 내용을 소개해보려 한다.

HTML에 이미지를 띄우고 싶을 때 <img class="" id="" src="" alt=""> 의 형식으로 코딩한다는 것을 우리 모두 알고 있다.

그리고 <img src="">에서 " " 사이의 값을

작업폴더 경로의 사진파일 혹은 인터넷에 업로드되어 있는 사진의 이미지 인터넷 주소를 활용하는 것이 보통이다.

나는 작업폴더의 경로를 활용하되, // ex) <img src="img/upload-img.png" // 작업폴더/하위폴더/사진파일.파일형식

해당 폴더의 특정 파일의 파일명.파일형식을 특정해서 이미지를 업로드하는 것이 아니라

모 function의 결과 값을 변수로 받아 그 변수의 값을 <img src = "">의" " 사이에 끌어다 넣어 파일을 읽어오고 싶었다.

물론 그 변수의 값은 파일명과 동일해야겠다. (그림이 아닌 글로 표현을 하자니 어렵다. 무슨 말인지 이해가 되는가?)

예를 들어, 모 파일의 파일명.파일형식이 abc.png이라면 abc를 변수 값으로 가져와서 이미지를 띄우고 싶은 것이다.

서론이 길었다. 기능을 구현한 코딩과 결과를 먼저 보이자면,

<body>

async function init() {

imageContainer = document.getElementById("image-container");

}

async function predict() {

const 변수2 = 변수1; // 변수1은 다른 function의 결과 값임

var imagecontainer = 변수2 // 값을 가지는 변수임

console.log(imagecontainer); // 개발자도구 확인용 로그 설정

$('.img-file-upload').attr("src","img/" + imagecontainer + ".png");

</body>

이미지 태그를 설정하고 / id = "image-cotainer", cleass = "img-file-upload", src=""

image-container라는 id를 가지고 있는 img 태그를 가져와서 imagecontainer에 넣는다. // predict init()

imagecontainer를 변수2 값을 갖는 변수로 정의하고,

Jquery를 활용하여 img-file-upload 클래스를 갖는 img의 src 값에 imagecontainer 변수 값을 넣어

img 폴더 내에 있는 'imagecontainer 변수 값'.png 파일을 이미지로 띄운다. // function predict()

스스로 이해하는 선에서 동작 플로우를 기술하였지만, 이해가 될지 모르겠다. (사실 나도 잘 모르겠다. 이해하려 노력할 뿐)

$('.class명).attr("src","img/"+ id명 + ".파일형식"); // img/ : 작업폴더 내 img 폴더를 가리킴

모 class의 src 값을 "img/ + 'id명 변수 값' + .파일형식"으로 바꾼다!로 해석된다.

위와 같이 코딩을 마무리하고 실제로 페이지에서 잘 동작하는지 확인해 보자.

우측 콘솔창을 보면 console.log(imagecontainer)를 통해 imagecontainer에 변수 값을 끌어와 로그로 띄우는 것을 확인할 수 있고,

변수 값 Warm-spring을 활용하여 img 폴더 안에 있는 warm-spring.png 파일을 이미지로 띄운 결과이다. (그림상 좌측 하단 빨강 네모 표시)

이것을 JQUERY라고 일컫는다고 하는데, 얼떨결에 구현은 했지만 아직도 잘 모르겠다. 퍼즐이 맞는 그날이 오기를 바란다.

p.s function 함수 안에서 <img src="" class=""> 따위 같은 형식은 사용이 불가하다. // 태그 자체가 먹통이 된다.

p.s 그리고 function 함수 안에서의 변수를 JQUERY를 활용하는 것이 아닌 단순히 function 함수 밖에서 <img src="">에 기입하면 에러가 뜬다.

728x90

HTML Style(CSS) 보정 w/ 개발자도구 F12 (0)	2024.01.18
HTML tag hide(), show() / div, img 등 (0)	2024.01.18
HTML Language 변환 (2) / Combo box + window.location.href (0)	2024.01.18
HTML Language 변환 (1) / HTML Page Add + Translate language Manually (0)	2024.01.18
웹 개발 (feat. 조코딩님) / 퍼스널컬러 AI 테스트 (0)	2024.01.18