お世話になります。
弊社本店 サイトでWordPressの記事をJSON形式で出力し、
javascriptとHTML、CSSで記事を表示しています。
記事のアイキャッチ画像を取得できない場合、
現在表示しているJavascriptの記述にどのように記述をすればよろしいでしょうか。
https://www.4860.jp/sub/test/ブログを表示するJavascriptの記述と、
画像が無い場合の代替画像を表示のjavascriptを記述しましたが、表示されませんでした。
▼参考にしたサイトはこちら
https://designsupply-web.com/media/programming/4883/取得出来なかった場合の代替画像を表示させる
記述方法がございましら、ご教示のほどよろしくお願いします。
<!-- ブログ記事を表示 -->
<div class="top_blog"></div>
<script>
$(function(){
$.ajax({
type: 'GET',
url: '
https://www.4860-blog.com/wp-json/wp/v2/posts?_embed&categories=813&orderby=id&per_page=20', dataType: 'json'
}).done(function(json){
var len = json.length;
for(var i=0; i < len; i++){
var title = json[i].title.rendered;
var link = json[i].link;
var excerpt = json[i].excerpt.rendered;
var imgurl = json[i]._embedded['wp:featuredmedia'][0].source_url;
var pubDD = new Date(json[i].date);
yy = pubDD.getYear();if (yy < 2000) { yy += 1900; }
mm = pubDD.getMonth() + 1;dd = pubDD.getDate();
var pubDate = yy +'.'+ mm +'.'+ dd ;
var html = '<ul><li><a href="' + link + '">'+'<img src="' + imgurl + '" class="blog_img" ><br><span>' + pubDate + '</span>' + title +'</a>' + excerpt + '</li></ul>';
$('.top_blog').append(html);
}
}).fail(function(json){
$('.top_blog').append("読み込みませんでした。");
});
});
</script>
<!-- 画像が無い場合 代替画像を表示 -->
<script>
const images = document.querySelectorAll('img.blog_img'); //class名があるimgタグ
images.forEach((image) => {
image.addEventListener('undefined',() => {
image.setAttribute('src', '
https://www.4860.jp/contents/images/alternative_img.jpg'); //代替画像
});
});
</script>