使用jquery路径将图像附加到表中时没有正确使用

时间:2018-02-05 04:56:40

标签: jquery html ajax

我有一个表,因为somedata就在那里。我正在使用ajax在该表中实现搜索功能。它工作正常。但我的问题是当我尝试根据存储在数据库表上的路径加载图像时。它不是loading.below是我的代码,用于将图像附加到表中。请任何帮助。谢谢你。

我的数据库中的图像路径我已经像这样存储了并尝试使用下面的行添加图像路径我的表格如下所示

   Assests/images/cakes.jpeg
    $('<td>').html("<img style='width:120px;height:100px;' id='images' alt='No image' src='<?php echo base_url();?>'"+data["prod_image_path"]+">").appendTo(tr);
//the problem with this line image path is not adding to url how i can fix 
//this
 <img style="width:120px;height:100px;" id="images" alt="No image" src="http://localhost/Demo/" assests="" images="" chocolate.jpg="">

//这是用于将图像添加到表格中的mycode

 $(function() {
    $("#search").keyup(function() {
        var value = $(this).val();
        $.ajax({
            url : "/Demo/Productcontroller/search",
            type: "POST",
            data: {
                name: value
            },
            success: function(response){
              var data=$.parseJSON(response);
                  if(data!=false){
                var tbody = $('#myTable tbody').empty();
                tbody = $('#myTable  tbody'),
                $.each(data, function(i, data) {
                  prop = [data["prod_name"],data["prod_group"],data["prod_maxstock"],data["prod_currentstock"]];
                  var tr = $('<tr>');
                  $.each(prop, function(i, prop) {
                  $('<td>').html(prop).appendTo(tr);
                  });
                  $('<td>').html("<img style='width:120px;height:100px;' id='images' alt='No image' src='<?php echo base_url();?>'"+data["prod_image_path"]+">").appendTo(tr);
                 $('<td>').html("<a href='<?php echo base_url();?>Productcontroller/edit/"+data["prod_id"]+"'><i class='fa fa-edit fa-2x'></i></a>").appendTo(tr);
                 $('<td>').html("<a class='delete'href='"+data["prod_id"]+"'><i class='fa fa-remove fa-2x'></i></a>").appendTo(tr);
                  tbody.append(tr);
            });
          }    }
  });
});
});

这是我的渲染HTML

<div class="scrollingTable result" style="width:100%;">
                <table id="myTable" class="table table-striped table-bordered table-fixed" cellspacing="0" style="width:100%;padding-top:20px;">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>GROUP</th>
                            <th>MAX STOCK</th>
                            <th>CURRENT STOCK</th>
                            <th>Image</th>
                            <th>Edit</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbod>
                        <tr>
                            <td>cakes and breads</td>
                            <td>food items</td>
                            <td>1500</td>
                            <td>1700</td>
                            <td>
                                <img style="width:120px;height:100px;" id="images" alt="No image" src="http://localhost/Demo/" assests="" images="" cakes.jpeg="">
                                </td>
                                <td>
                                    <a href="http://localhost/Demo/Productcontroller/edit/5">
                                        <i class="fa fa-edit fa-2x"></i>
                                    </a>
                                </td>
                                <td>
                                    <a class="delete" href="5">
                                        <i class="fa fa-remove fa-2x"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>chacolates and breads</td>
                                <td>food items</td>
                                <td>1500</td>
                                <td>1700</td>
                                <td>
   //I Know the problem with this line property path is not taking correctly 
    //why Please Any help
                                    <img style="width:120px;height:100px;" id="images" alt="No image" src="http://localhost/Demo/" assests="" images="" chocolate.jpg="">
                                    </td>
                                    <td>
                                        <a href="http://localhost/Demo/Productcontroller/edit/4">
                                            <i class="fa fa-edit fa-2x"></i>
                                        </a>
                                    </td>
                                    <td>
                                        <a class="delete" href="4">
                                            <i class="fa fa-remove fa-2x"></i>
                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

2 个答案:

答案 0 :(得分:1)

请编辑图像源追加文字行

 var imgSource = '<?php echo base_url();?>'+data["prod_image_path"];
   $('<td>').html("<img style='width:120px;height:100px;' id='images' alt='No 
    image' src='"+imgSource+"'>").appendTo(tr);

答案 1 :(得分:0)

我已经更改了下面的一些代码现在工作正常。

var imgSource = '<?php echo base_url();?>'+data["prod_image_path"];
$('<td>').html("<img style='width:120px;height:100px;' id='images' alt='No image' src='"+imgSource+"'>").appendTo(tr);