Descripción del problema:
Escribí un sistema. Una vez que el usuario inicia sesión, usará los datos de la base de datos como el avatar del usuario, que debe mostrarse en la página. El enlace del avatar debe estar representado por una variable, y luego se usa para :src
el enlace dinámico y la variable se agrega directamente
problema resuelto:
1. Utilizarrequire
Dado que el enlace que usamos para escribir el código fue antes de la compilación, después de la compilación del archivo de imagen, no hay error si se escribe directamente a muerte en el require (si es todo una cadena), pero si solo se usa una variable, se informará un error
2. require
Consejos de uso
Encontré un tutorial útil: el front
- end es6 require introduce dinámicamente la imagen e informa un error Error: No se puede encontrar el módulo , "Debido a que require es una identificación requerida por la herramienta de empaquetado, si lo define a través de variables en tiempo de ejecución, no se puede empaquetar Eso es todo ", luego agrega una cadena y crea un prefijo
<img :src="imgUrl" class="user-avator" alt />
computed: {
imgUrl: function () {
return this.photo;
}
}
this.photo = require("../../assets/img/"+obj.photo);
obj es el objeto de información del usuario. La foto almacena el nombre del archivo de avatar del usuario, más la carpeta de prefijo, require
que se puede obtener dinámicamente usándola .