img태그에 src부분에 변수를 넣어서 사용하는게 목적인데요! vscode에서<img src="../../../agent_web_ui/dat/images/1668994704846/arrive_kiupdata1_kiupdata1_20200310172655897_92974574455-20200310_172655_8.png" />이런식으로 치면화면에서 F12눌렀을때 나오는 코드에서는<img src="img/arrive_kiupdata1_kiupdata1_20200310172655897_92974574455-20200310_172655_8.1a7485a1.png">이런식으로 자동으로 바뀌면서 이미지가 화면에 나오는데요하지만 주소를 변수(a)에 넣어서<img :src="a" />이런식으로 치면<img src="../../../agent_web_ui/dat/images/1668994704846/arrive_kiupdata1_kiupdata1_20200310172655897_92974574455-20200310_172655_8.png" />화면(F12)에서는 변환되지 않고 변수에 넣었던 값이 그대로 나오면서 이미지가 화면에 나오지 않더라고요 require('../../../agent_web_ui/dat/images/1668994704846/arrive_kiupdata1_kiupdata1_20200310172655897_92974574455-20200310_172655_8.png')를 하면img/arrive_kiupdata1_kiupdata1_20200310172655897_92974574455-20200310_172655_8.1a7485a1.png변환되서 화면에 이미지가 나오는 값으로 변경되더라구요 그래서 require()에 주소를 넣은 변수를 넣어서 화면에서 이미지가 나오는 값으로 뽑아내고 싶은데 어떻게 해야 할까요?require(`${this.sumpath2}`)를 하니까"Error: Cannot find module '../../../agent_web_ui/dat/images/1668994704846/arrive_kiupdata1_kiupdata1_20200310172655897_92974574455-20200310_172655_8.png'"이렇게 나와요! require()를 안쓰더라도 img src태그에 변수를 넣고 화면에 띄웠을때 변환될 수 있게 하는 방법도 있으면 알려주시면 감사하겠습니다! 

안녕하세요~ 1분 코딩님 이미지를 삽입할 때, 2가지 방법이 있는데요. "CSS 에서 background 속성으로 이미지를 삽입하는 것"과 "HTML에서 img 태그를 이미지를 삽입하는 방식" 이 2가지 방식을 언제 사용하면 좋다거나, 언제는 사용하면 안 되는 상황이 있나요?? 예를 들어, 어느 상황에서는 CSS에 이미지를 집어넣는 게 컨트롤 하기 더 유리한 케이스라든지 혹은 HTML의 img 태그는 중요한 이미지들을 삽입하는 데 쓴다는 등 ...   CSS에서 이미지를 넣는 방식과 HTML에서 이미지를 넣는 방식 구지 2가지 방식을 만들어 놓은 이유가 있을 것같아서 질문드립니다. 감사합니다.  

안녕하세요! img src 주소 관련 질문드리겠습니다! process.env.PUBLIC_URL + `/... 경로`를 하셨는데 src에 그냥 /assets/emotion1.png를 해도 잘 나오는데 상관없는거죠?? 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. // // // 안녕하세요. 저는 이 강의를 들을때 boiler plate를 쓰지 않았습니다. 그냥 혼자서 만든 boiler plate에 사용하고 있습니다. 저는 module에서 proxy값을 설정하지 않고, 그냥 cors 설정을 통해서 클라와 서버간에 통신을 시켜주고 있는데요. 궁금한점은 <img src={`http://localhost:5000/${image}`}></img> 이 부분입니다. 즉, 위 img테그는 get요청을 http://localhost:5000/uploads/이미지파일.jpg 위의 경로 보내게 됩니다. 그런데 저는 도통 이미지가 출력이 되지 않더군요. 그 이유가 혹시 proxy 설정을 해주지 않아서인가요? 즉. proxy설정을 하게되면, http://localhost:5000/uploads/이미지파일.jpg 이 경로로 브라우저에서 enter를 치면 이미지파일이 보이나요? 저는 cors설정을 해서 그런지 http://localhost:5000/uploads/이미지파일.jpg 크롬에서 저 주소값을 enter를 치면 이미지파일이 보이지 않앗습니다. 그래서 fs.readfile을 써서 이미지파일을 읽어올수있게 바꿔서 설정했거든요. 음...proxy가 도대체 어떤 역할을 하길래, img파일가지 다 읽어주는지 궁금해서 질문드려봅니다.

안녕하세요, 그랩님! 그랩님 강의를 보고 그랩마켓 적용을 학습했습니다. 그 후에 자체적으로 복습을 위해 psg 축구팀 소개 페이지를 클론코딩 중인데요, 이미지 태그 삽입 중 src 속성에 경로 표시에 있어서 의문점이 있어 질의드립니다. (삽입하려는 이미지 모두 public 폴더에 정상적으로 있습니다.) 1. public/logo/logo-psg.png : 엑스박스 처리. 2. logo/logo-psg.png : 정상 삽입. 3. 절대경로 : 엑스박스 처리. 1, 3의 경우에는 왜 이미지가 정상적으로 삽입되지 못하는지 궁금합니다.

<template> <div> <img :src="url" /> </div> </template> <script> export default { name:'', components : {}, data(){ return { url: '../assets/logo.png' }; }, setup(){}, created(){}, mounted(){}, methods: { }, } </script> <style scoped> </style> 처음에 vue프로젝스를 시작할때 이미지 파일이 있어서 이거를 url로 넣고 바인딩을 시도 했는데 브라우저에 화면이 나오지 않는 현상이 있는데요 모든 컴포넌트는 같은 위치에 있어서 경로가 틀렸다고 생각하지 않는데 이건 왜그런걸까요? 추가로 이미지에 바로 경로를 넣어 주었을때는 정상적으로 이미지가 나오고 있습니다.