Question

我在加载基本64格式的图像时遇到了一些问题。

在我的前端： <img src="/path/to/rest/image">

其他服务代表：

@GET
@PublicResource
@Produces("image/*")
@Path("/path/to/rest/image")
public Response getResource() {

    CacheControl cacheControl = new CacheControl();
    cacheControl.setMaxAge(86400);
    cacheControl.setPrivate(true);
    //image.imputStream() is the stream of the image's base64 representation
    Response.ok(image.getInputStream())).cacheControl(cacheControl)
                    .header("Cache-Control", "max-age=86400").build();
}

它返回正确的base64，当我在任何解析器中将其解析为图像时，它会显示图像。但img标签仍显示图像已损坏。任何想法如何解决它？可能我必须添加一些标题。

Answer 1

将以下文本添加到从休息服务返回的base 64

data:image/png; base64,

Answer 2

$(document).ready(function() {
  $('#example').DataTable();
  let now = new Date();
  let year = now.getFullYear();
  let month = ("0" + (now.getMonth() + 1)).slice(-2);
  $('#annee').val(year);
  $('#mois').val(month);
});

也许这段代码会有所帮助。我将照片以字符串形式存储在DB中，这些字符串看起来像是“ data：image / gif; base64，/ 9j / 4AAQSkZJRgABAQEASABIAAD / 4RF ....”。它们由userKey使用getStaffPhoto（）方法获取。

在客户端，代码类似于

<div class="container">
  <div class="form-panel" id="form1">
    <div class="row">
      <h4 class="mb"><i class="fa fa-angle-right"></i>Pointage des salaries monsuel</h4>
      <div class=" col-md-10 col-md-offset-1">
        <div class="form-group col-md-3">
          <label for="titre">year</label>
        </div>
        <div class="form-group col-md-5">
          <input type="text" name="datep" id="annee" class="form-control">
        </div>
      </div>
      <div class=" col-md-10 col-md-offset-1">
        <div class="form-group col-md-3">
          <label for="titre">month</label>
        </div>
        <div class="form-group col-md-5">
          <input type="text" name="datep" id="mois" class="form-control">
        </div>
      </div>
      <div class=" col-md-10 col-md-offset-1 ">
        <div class="form-group col-md-4">
          <label for="titre">period</label>
        </div>
        <div class="form-check form-check-inline col-md-3">
          <input type="radio" class="form-check-input" id="q1" name="quanzaime">
          <label class="form-check-label" for="q1">1st Fortnight</label>
        </div>
        <div class="form-check form-check-inline col-md-3">
          <input type="radio" class="form-check-input" id="q2" name="quanzaime">
          <label class="form-check-label" for="q2">2nd Fortnight</label>
        </div>
      </div>
      <div class=" col-md-10 col-md-offset-1 ">
        <div class="form-group col-md-3">
          <label for="titre">Salary</label>
        </div>
        <div class="form-group col-md-5">
          <select class="form-control" id="salarie_id">
            <option selected disabled>Select salarie</option>
            <option value="1">najib marzouk 1</option>
            <option value="2">ali tahiri 2</option>
            <option value="3">mahjoub zerou 3</option>
          </select>
        </div>
      </div>
      <div class=" col-md-10 col-md-offset-1 ">
        <div class="form-group col-md-3">
          <label for="titre">Site</label>
        </div>
        <div class="form-group col-md-5">
          <select class="form-control" id="chantier_id">
            <option selected disabled>Select Location</option>
            <option value="1">azilal</option>
            <option value="2">ihjamn</option>
            <option value="3">asfalou</option>
          </select>
        </div>
      </div>
      <div class="col-md-2 col-md-offset-5">
        <button class="btn btn-theme" type="submit">cherche</button>
      </div>
    </div>
  </div>
  <div class="form-panel" id="form2">
    <div class="row">
      <table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
          <tr>
            <th>salary</th>
            <th>date</th>
            <th>site</th>
          </tr>
        </thead>
        <tbody id="b">
          <tr>
            <td>najib marzouk</td>
            <td>2020-03-05</td>
            <td>azilal</td>
          </tr>
          <tr>
            <td>ali tahiri</td>
            <td>2015-03-15</td>
            <td>ihjamn</td>
          </tr>
          <tr>
            <td>mahjoub zerou</td>
            <td>2010-03-20</td>
            <td>asfalou</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

将base64中的图像从rest服务返回到img src标记

2 个答案: