En primer lugar: tengo conocimiento de una pregunta similar ( el enlace de datos Vue JS no funciona para img src ), pero sigo publicando esta pregunta aquí ya que la solución de esa pregunta no resolvió mi problema.

Quiero mostrar una imagen en mi aplicación web (codificada en VueJS), pero desafortunadamente cuando vinculo la cadena de ubicación del archivo de imagen a la propiedad src de la etiqueta img , la imagen no se muestra en la aplicación web.

Tengo el siguiente código:

 <template> <div class="home"> <img src="@/assets/Home.jpg" /> <img :src="src" /> </div> </template> <script lang="ts"> import Vue from "vue"; export default Vue.extend({ name: "Home", data() { return { src: "@/assets/Home.jpg", }; }, }); </script>

El primer componente img se muestra normalmente, pero el segundo (que vincula los datos a la propiedad src) no.

Ya lo intenté (como se sugiere en el enlace de datos Vue JS que no funciona para img src ):

 <img :src="require(src)" />

lo que me dio el error:

 [Vue warn]: Error in render: "Error: Cannot find module '@/assets/Home.jpg'"

¡Gracias por cualquier ayuda!