Estoy tratando de hacer 6 bloques con diferentes imágenes de fondo, probé diferentes opciones pero ninguna funciona,
Esto funciona:
<div :style="{ backgroundImage: `url(${require('../assets/images/img/img-1.jpg')})` }"></div>Estos dos no funcionan incluso si 'prueba' es literalmente el camino correcto para el img:
<div :style="{ backgroundImage: `url(${require(test)})` }"></div> <div class="col-4 jum-block" :style="{ backgroundImage: 'url(' + require(test) + ')' }"></div> <script> export default { name: "Component", data() { return { test: "../assets/images/img/img-1.jpg", cardImgPath: "../assets/images/img/", images: [ { img: "img-1.jpg" }, { img: "img-2.jpg" }, { img: "img-3.jpg" }, { img: "img-4.jpg" }, { img: "img-5.jpg" }, { img: "img-6.jpg" }, ], }; }, }; </script>Dado el uso de require() , asumo que su proyecto es un proyecto basado en Webpack (con scaffolding de Vue CLI).
El argumento require() no puede ser una expresión completamente dinámica por la misma razón que las llamadas import() no pueden :
Expresiones dinámicas en import()
No es posible utilizar una declaración de importación totalmente dinámica, como
import(foo). Porquefoopodría ser potencialmente cualquier ruta a cualquier archivo en su sistema o proyecto.El
import()debe contener al menos alguna información sobre dónde se encuentra el módulo. La agrupación se puede limitar a un directorio específico o a un conjunto de archivos, de modo que cuando utilice una expresión dinámica, se incluyan todos los módulos que podrían solicitarse en una llamadaimport(). Por ejemplo,import(`./locale/${language}.json`)hará que cada archivo.jsonen el directorio./localese empaquete en el nuevo fragmento. En tiempo de ejecución, cuando se haya calculado el idioma variable, cualquier archivo comoenglish.jsonogerman.jsonestará disponible para su consumo.// imagine we had a method to get language from cookies or other storage const language = detectVisitorLanguage(); import(`./locale/${language}.json`).then((module) => { // do something with the translations });
En su caso, podría cambiar su argumento require() para incluir el directorio de ruta de la imagen:
<div v-for="image in images" :style="{ backgroundImage: `url(${require('../assets/images/img/' + image.img)})` }" ></div> <script> export default { data() { return { images: [ { img: "img-1.jpg" }, { img: "img-2.jpg" }, { img: "img-3.jpg" }, { img: "img-4.jpg" }, { img: "img-5.jpg" }, { img: "img-6.jpg" }, ], }; }, }; </script>