imageSrc de App.vue a HelloWorld.vue , pero la imagen no aparece.
aplicación.vue
<HelloWorld imageSrc="./assets/logo.png" />HolaMUNDO.vue
<template> <div class="hello"> <img :src="imageSrc" alt="img" /> </div> </template> <script> export default { name: "HelloWorld", props: { imageSrc: String, }, }; </script> <style scoped> </style> Caja de arena de código:
https://codesandbox.io/s/cocky-hofstadter-bomkf?file=/src/components/HelloWorld.vue:0-432
Esto te ayudará y está funcionando:
<template> <div id="app"> <HelloWorld :imageSrc="logo" /> </div> </template> <script> import HelloWorld from "./components/HelloWorld"; import Logo from "./assets/logo.png"; export default { name: "App", components: { HelloWorld, }, data: function () { return { logo: Logo, }; }, }; </script>Sandbox de trabajo: https://codesandbox.io/s/dark-haze-z3b7m?file=/src/App.vue:0-331
Mueva su carpeta de assets a pública. Debería funcionar bien.
Aquí está el enlace de demostración
Activos estáticos colocados en el directorio público y referenciados a través de rutas absolutas. Estos activos simplemente se copiarán y no pasarán por el paquete web.
Para acceder a los activos estáticos con una ruta absoluta, debe mantener los activos en una carpeta pública.
Lea la documentación para obtener más información.