2016-09-18 2 views
0

전자 앱을 테스트하고 있습니다. this 웹 사이트에서 이미지를 가져오고 싶습니다. 이 웹 사이트에는 this 코드를 가진 JSON 파일이 있습니다.NodeJS를 사용하여 JSON 파일에서 이미지 가져 오기

어떻게 이미지를 가져 와서 img 태그에 넣을 수 있습니까?

var request = require('request'); 

request("http://www.pgbovine.net/photos/json-files/boston.json" ,  function(error, response, body) { 
body = JSON.parse(body); 
console.log(body); 

function addImg(arr) { 
    myImg = arr[0]["filename"]; 
    var theImg = document.getElementById("image"); 

    theImg.innerHTML = myImg; 
} 

그리고이 HTML :

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Pics</title> 
    </head> 
    <body> 

    <img id="image"> 

    <script type="text/javascript"> 
     require("./memes.js") 
    </script> 
    </body> 
</html> 

문제는, 그 코드는 아무것도하지 않습니다

은 지금까지 나는이 코드를 가지고! 그렇다면 어떻게 위의 JSON 파일에서 이미지를 가져 와서 img 태그에 넣을 수 있을까요? (NodeJS 또는 바닐라 자바 ​​스크립트 사용)

+0

여기서 js 코드를 사용하고 있습니까? js 코드가 기본 자바 스크립트 응용 프로그램 파일에 사용됩니까? "그 코드가 아무 것도하지 않는다"는 것은 빈약 한 설명이다. package.json과 앱의 main.js 파일을 게시하십시오. – Marcs

답변

0

img 태그에 파일 이름을 추가하기 만하면 파일 이름 (예 : IMG_2914.JPG)이 아닌 전체 이미지 URL을 추가해야합니다.

나는 http://www.pgbovine.net/photos/IMG_2914.JPG을 시도했지만 404 오류가 발생했습니다.

0

img html 태그의 'src'속성을 수정하여 해당 이미지의 URL 또는 상대 경로를 가리켜 야합니다.

theImg 변수의 'setAttribute'를 호출하면됩니다.

JSON 응답의 구조에 따라 각 이미지 객체의 '설명'문자열에 'alt'속성을 설정하여 간단한 마우스 오버 텍스트를 제공 할 수 있습니다.

여기서 말하는 JSON에는 실제로 이미지가 포함되지 않고 이미지의 파일 이름 인 문자열 만 있습니다. 웹 사이트를 기반으로

당신이 보스턴 이미지 갤러리에서 물건을 잡아, 긁어하려고 시도하는 것, 다음과 같은 문자열로 파일 이름을 추가해야합니다 : 그래서처럼 http://www.pgbovine.net/new-galleries/boston/images/

:

<img src="http://www.pgbovine.net/new-galleries/boston/images/IMG_2914.JPG">

관련 문제