Estoy ejecutando una aplicación web de paquete web en AWS S3 y tengo que mostrar imágenes dinámicamente. Encontré este siguiente código gracias a esta publicación :
getImgUrl(nameImage) { let images = require.context("../static/images/members/", false, /\.jpg$/); return images("./" + nameImage + ".jpg"); }Y en mi plantilla vuetify:
<template v-else-if="activeTab == 0"> <img :src="getImgUrl(chunk[i-1])" /> </template>El problema es que las imágenes no se cargan ya que mi servidor AWS devuelve un origen estricto de error 403 Prohibido cuando se cruza el origen.
Eso es raro porque no tengo ningún problema con otra imagen que cargo en mi barra superior con este código:
<v-img :alt="appName" class="shrink mr-2" contain :src="require('../static/images/logo.jpg').default" width="40" height="40" />¿Tiene alguna otra idea de cómo podría requerir mis imágenes dinámicamente?
No importa, solo tuve que agregar .default al valor para devolver:
getImgUrl(nameImage) { let images = require.context("../static/images/members/", false, /\.jpg$/); return images("./" + nameImage + ".jpg").default; }Recuerden niños: si require() no funciona, solo agreguen .default al final #SuperSmart
Para ser verdad, no entendía por qué tenía que hacer esto, pero si lo saben, no duden en decírmelo en los comentarios.