El problema de img en VUE: src cargando imágenes dinámicamente, require no se puede usar casualmente

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 :srcel 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. requireConsejos 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, requireque se puede obtener dinámicamente usándola .

Supongo que te gusta

Origin blog.csdn.net/qq_41170600/article/details/108732424
Recomendado
Clasificación