Mostrar imágenes de tipo Byte obtenidas de la base de datos PostgreSQL en el front-end de Vue

1. Procesamiento de fondo:

   En el backend (Node.js, Express u otro marco), asegúrese de poder obtener datos de imagen de tipo byte de la base de datos PostgreSQL. Esto puede implicar el uso de una herramienta ORM (mapeo relacional de objetos) adecuada o consultar manualmente la base de datos.

   Por ejemplo, si usa Node.js y Express, puede obtener datos de imagen de una manera similar a la siguiente:

   app.get('/api/getImage', (req, res) => {
         
         
     // 查询数据库获取字节数据
     // 这里假设你使用了某个 ORM，具体情况可能有所不同
     const imageData = // 获取从数据库查询得到的字节数据;
   
     // 将字节数据发送给前端
     res.send(imageData);
   });
   

2. Procesamiento frontal:

   En la interfaz de Vue, debe utilizar métodos adecuados para convertir datos de bytes en formatos de imagen utilizables. Normalmente, puede utilizar objetos Blob para manejar datos de bytes. En los componentes de Vue, esto se puede lograr de las siguientes maneras:

   <template>
     <div>
       <img :src="imageUrl" alt="Image" />
     </div>
   </template>
   
   <script>
   export default {
         
         
     data() {
         
         
       return {
         
         
         imageUrl: '', // 存储图片的URL
       };
     },
     mounted() {
         
         
       this.getImage();
     },
     methods: {
         
         
       async getImage() {
         
         
         // 发送请求获取字节数据
         const response = await fetch('/api/getImage');
         const imageData = await response.blob();
   
         // 将Blob对象转换为DataURL
         const imageUrl = URL.createObjectURL(imageData);
   
         // 更新Vue组件的imageUrl
         this.imageUrl = imageUrl;
       },
     },
   };
   </script>
   

   En este código, obtenemos fetchlos datos de bytes usando, luego convertimos el objeto Blob en un DataURL y finalmente lo configuramos como el imageUrl del componente Vue.