jQueryを使用してイメージを取得する方法

Question

私はこのコードを持っており、jQueryを使用してイメージを自分のサイトに読み込む方法を知りました。

$.getJSON('https://en.wikipedia.org/w/api.php?action=parse&page=New_Jersey&prop=text&format=json&callback=?', function(json) { 
    const text = json.parse.text['*']; 
    const regex = /([-\w+\.\/]+(?:png|svg))/gmi; 
    let m; 
    while ((m = regex.exec(text)) !== null) { 
     // This is necessary to avoid infinite loops with zero-width matches 
     if (m.index === regex.lastIndex) { 
      regex.lastIndex++; 
      picture = regex.lastIndex++; 
     } 

     // The result can be accessed through the `m`-variable. 
     console.log(`Found match: ${m[1]}`); 
    }}); 

イメージはコンソールにロードされますが、実際のページにはロードされません。 HTMLページに画像を表示するにはどうすればよいですか？それは私が使用する必要がある "m"変数ですか？私の画像は絶対パスでロードされると言われましたが、Wikipedia APIから来ているので、これらの画像は相対パスにあると仮定します。 jQueryのを使用して

Answer 1

は、ちょうどDOMの要素にimg要素を追加します。

$.getJSON('https://en.wikipedia.org/w/api.php?action=parse&page=New_Jersey&prop=text&format=json&callback=?', function(json) { 
 
    const text = json.parse.text['*']; 
 
    const regex = /([-\w+\.\/]+(?:png|svg))/gmi; 
 
    let m; 
 
    while ((m = regex.exec(text)) !== null) { 
 
    // This is necessary to avoid infinite loops with zero-width matches 
 
    if (m.index === regex.lastIndex) { 
 
     regex.lastIndex++; 
 
     picture = regex.lastIndex++; 
 
    } 
 

 
    // The result can be accessed through the `m`-variable. 
 
    $('#images').append('<img src="'+m[0]+'" />'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="images"></div>