Quiero usar una imagen svg de mi carpeta de activos en uno de mis componentes como imagen de fondo. Aquí hay un ejemplo de mi componente:
<template> <div class="container"></div> </template> <script> export default { name: 'component' } </script> <style scoped lang="scss"> .container { height: 40px; width: 40px; background-image: url('@/assets/image.svg'); } </style>Pero la imagen no aparece. El Camino es correcto. ¿Dónde está mi error? Gracias por tu ayuda.
Como Max Martynov , resaltado en los comentarios, debe usar url('~@/assets/image.svg') .
Webpack tiene algunas reglas específicas al resolver activos [1] .
Para resolver un alias ( @ ), como lo está utilizando, es obligatorio que el paquete web maneje la solicitud como una solicitud de módulo. El uso del prefijo ~ obliga a webpack a tratar la solicitud como una solicitud de módulo, similar a require('some-module/image.svg') .
Recomendaría usar el enlace de estilo. Encontré este enlace de hilo realmente útil.
Aquí un ejemplo usando tarjetas de arranque
<div class="card-image" :style="{ backgroundImage: 'url(' + require('@/assets/images/cards.jpg') + ')' }">La imagen está en src/assets/images/cards.jpg
Esto es lo que funcionó para mí.
<div class="image" v-for="(image, imageIndex) in slideshow" :key="imageIndex" :style="{ backgroundImage: 'url(' + require(`@/assets/${image}`) + ')', width: '300px', height: '200px' }" ></div> Donde la presentación de slideshow se ve así:
data() { return { slideshow : [ "MyImages/1.png", "MyImages/2.png" ] }Asegúrese de que la extensión de la imagen esté en minúsculas. Si la imagen tiene una extensión en mayúsculas, cámbiela a minúsculas, de lo contrario no funcionará.
<style lang="scss"> .section{ background-image: url('~@/assets/photos/DSC08611.jpg'); //WORKED! background-image: url('~@/assets/photos/DSC08611.JPG'); //DID NOT WORK } </style>