Question

我想从我的剩余api端点中获取图片，并将其显示在弹出窗口中以获取vue-leaflet标记：

<l-marker v-for="marker in markers"
   :key="marker.id"
   :visible="marker.visible"
   :draggable="marker.draggable"
   :lat-lng.sync="marker.position"
   @click="findRoute(marker.position)"
   :icon="marker.icon"
   >
   <l-popup>
      <div class="product-lit-position">
         <div class="productImage"><img id="output" :src="marker.image"/></div>
      </div>
   </l-popup>
</l-marker>

我正在从vue中的rest api获取图片：

 AXIOS.get(`/api/products/getAll`)
    .then(response => {
            for (var i = 0; i < response.data.length; i++) {
                this.marker = {
                    id: response.data[i].id,

                    image: response.data[i].productImage
                };
                this.marker.image = this.loadPicture(this.marker.image);
            }

响应为：

[{"id":1,"latitude":52.1966859,"productImage":{"fileName":"image","fileType":"image/jpeg","data":"(shortened for better readability)"}, (...)

然后我试图读取数据：

 loadPicture(productImage){

                var reader = new FileReader();
                console.log();
                reader.result = reader.readAsDataURL(productImage);
                return reader.result;
            },

但是我得到了错误：

无法在'FileReader'上执行'readAsDataURL'：参数1不是类型为“斑点”。

问题是如何从响应中正确加载图像并将其绑定到img src？

如何从Rest API读取和加载图像-无法在'FileReader'上执行'readAsDataURL'：参数1的类型不是'Blob'

0 个答案: