如何从数据库中获取图像并在 laravel 中使用 ajax 以编辑形式预览它？

Posted 2023-05-09

【中文标题】如何从数据库中获取图像并在 laravel 中使用 ajax 以编辑形式预览它？

【英文标题】：How to get image from DB & preview it in edit form using ajax in laravel?

【发布时间】：2021-05-10 19:02:16

【问题描述】：

我正在尝试在 laravel 中使用 ajax 从数据库中获取数据。我得到了所有数据并将其成功加载到编辑表单中，除了图像。我从数据库中获取了图像，但无法在编辑表单上预览。

这是我的 ajax 调用

         function editProduct(id, category_id) 
          $.ajax(
            url: " url('admin/products/edit/') /" + id,
            type: "GET",
            contentType: false,
            cache: false,
            processData: false,
            dataType: "json",

            success: function(response) 
                $("#edit-modal").modal("toggle");
                $(".id").val(response.id);
                $("#edit_name").val(response.name);
                $("#edit_category").val(category_id);
                $("#edi_image").val();   <---What to do here?  --->

            
        );


    

这是我的控制器代码

public function edit($id) 
    $product = FoodItem::findOrFail($id);
    return response()->json($product);

我想在这里加载图片

<img src='' id="edit_image"   class="mt-2">
   <p>Old image</p>

谁能告诉我该怎么做？

【参考方案1】：

我希望您将图像路径存储在数据库中，并将图像存储在公共资产中。如果是这种情况，那么只需使用 jQuery 更新图像 src

$("#edi_image").attr('src','images/'+response.image); // change the path to your image

【讨论】：

谢谢，伙计！它奏效了。如果我选择新图像，那么如何在上传数据库之前将其加载到 jquery 中的旧图像位置？

您可以在元素上使用 onchange 方法：例如