如何在jquery AJAX 请求中显示来自posts数据数组的图像?

wfsdck30  于 2022-11-22  发布在  jQuery
关注(0)|答案(1)|浏览(130)

我正在使用 AJAX 请求从有许多图片和视频文件的表中获取帖子数据。我想获取有多个图片和视频的帖子模型数据。但我面临着用jquery脚本在html中显示这些数据的问题。
PHP控制器:

public function getposts(){

  //make one array of all table data
  $posts = Post::orderBy('id', 'DESC')->with('postimages')->with('postvideos')->get();
   return response()->json($posts, 200);
  }

jQuery脚本:

<script>
$(document).ready(function(){
  $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
  });

//fetch all posts
 getPosts();
 function getPosts(){
   $.ajax({
     url: '/fetch-posts',
     type: 'GET',
     dataType: 'JSON',
     processData: false,
     contentType: false,
     cache: false,

     success: function(data){
       
      $('div #postedarea').empty();
      $.each(data, function(key, item){
              $('.post-texts').append(item.text + '<br>');
             $('#postImagesShow').append("<img src='public/images/posts/'" +item['image']+ "/>");

            // $('#postVideo').attr('src', 'public/videos/posts/' + item.video);

            });
          }
        });
      }
        });
</script>

Html代码在这里:

<div class="postedareas">
<div class="posttextarea" id="posttextarea">
  <p id="posttext" class="post-texts" >  </p>
</div>

<div class="" id="postImagesShow">
  <img class="img-responsive" id="postImage" src="" />
</div>

<div class="" id="postVideoShow">
  <video id="postVideo" src="" autoplay >

  </video>
</div>

主要问题在于图像拼接 *

xyhw6mcr

xyhw6mcr1#

我有我的问题的解决方案。回答:

<img src="images/posts/'+image.image+'" class="img-responsive"/>

相关问题