He encontrado un error extraño en mi aplicación. Estoy usando VueJS3 y mecanografiado. Estoy creando una galería de medios, donde los usuarios pueden administrar activos. Todos los puntos finales y el backend de la aplicación funcionan perfectamente. Actualmente estoy trabajando en la actualización de archivos de imagen (actualización del campo de imagen). Mi código funciona en teoría, la URL de la imagen se actualiza a una nueva, pero incluso la URL es más nueva, la imagen que se muestra es una imagen antigua (antes de la actualización). Cuando trato de ver mi aplicación en la ventana de incógnito, se muestra mi imagen más reciente. Pero no funciona de otra manera (funciona si y solo el usuario borra su caché) Espero haberme explicado claramente, es un poco complicado :)
Cuando busco los datos de la API, no tienen ningún src, por lo que tengo que crear una propiedad al usar los datos. Aquí está el código a continuación.
const { res, err } = await this.$api.image.getAll(params) res.data.items.forEach(async (image: Image<Populated>) => { image.src = this.$fileHandler(image._id) })Nota: el controlador de archivos es un método especial que proporciona la fuente de la imagen por id.
Aparentemente, sus activos se almacenan en caché y hay varias formas de resolver eso.
No profundizar demasiado en las estrategias de almacenamiento en caché y las etiquetas de control de caché, solo hazlo.
image.src = `${this.$fileHandler(image._id)}?_=${+new Date()}`Esto generará una URL (casi) única para su imagen, invalidando todas las almacenadas en caché anteriores.