如何使用jquery设置和重新设置dropify默认图像？

Question

我有一个包含多列和一列包含图像的数据表，我尝试使用弹出的自定义模式显示 dropify 输入标签内的图像，当我单击连接到该数据值的按钮时，该模式会显示特定行。当我决定单击并单击不同行中的另一个按钮时，如何正确设置 dropify 字段的默认图像并重新设置它？这是我当前的代码：

<table>
<thead>
...
</thead>
<tbody>
    <td>...</td>
    <!--the row containing the images -->
    <td>
        <img id="pic" src="url('api/image',['foldername','filename']" style="width:150;height:150"/>
    </td>
    ....
    <!--the row containing the buttons -->
    <td>
        <a href"#" ... data-image="{{$data->image}}" >
        ....
    </td>
</table>

显示图像的模式：

<div class="form-group">
      <label class="control-label col-sm-2" for="pic">Picture:</label>
       <div class="col-sm-10">
            <small>max 650x650</small>
                 <div>
                       <input type="file" id="image_edit" class="form-control" />
                  </div>
                  <p class="errorPicture text-center alert alert-danger hidden"></p>
        </div>

设置图像的jquery：

$(document).on('click', '.show-modal', function(){
  ...
   var imagePath = $IMAGE_PATH;
   $('#image_edit').attr("data-default-file",imagePath);
   $('#image_edit').dropify();
  ...

}

我遇到的问题：

• 无法使用 $(this).data('image'); 检索值默认图像；

• 当我单击不同行上的另一个按钮时，默认图像不会改变

如何正确实施这一点？

Answer 1

使用这个

data-default-file="{{ asset($product->image) }}"

，请参阅下面的片段：

  <input type="file" id="input-file-now" name="image" class="dropify"  data-default-file="{{ asset($product->image) }}"  />

Answer 2

  <input type="file" id="input-file-now" name="image" class="dropify"  data-default-file="{{ asset($product->image) }}"  />

Answer 3

---

您可以重置预览图像并设置新的src

const avatarDropify = $(avatarSelector).dropify();
const avatar = avatarDropify.data('dropify');
avatar.resetPreview();
avatar.setPreview(true, path);