Descrição do Problema:
Eu escrevi um sistema. Depois que o usuário fizer login, ele usará os dados do banco de dados como o avatar do usuário, que precisa ser exibido na página. O link do avatar precisa ser representado por uma variável e, em seguida, é usado para :src
vinculação dinâmica, e a variável é adicionada diretamente
problema resolvido:
1. Userequire
Uma vez que o link que usamos para escrever o código foi antes da compilação, após a compilação do arquivo de imagem, não há erro se for gravado diretamente no require (se for todo um string), mas se apenas uma variável for usada, um erro será relatado
2. require
Dicas de uso
Eu encontrei um tutorial útil - o front
- end es6 require apresenta dinamicamente a imagem e relata um erro Erro: Não é possível encontrar o módulo , "Porque require é uma identificação exigida pela ferramenta de empacotamento, se você defini-la por meio de variáveis em tempo de execução, ela não pode ser empacotada É isso ", então adicione uma string e faça um prefixo
<img :src="imgUrl" class="user-avator" alt />
computed: {
imgUrl: function () {
return this.photo;
}
}
this.photo = require("../../assets/img/"+obj.photo);
obj é o objeto de informação do usuário.A foto nele armazena o nome do arquivo do avatar do usuário, mais a pasta de prefixo, require
que pode ser obtida dinamicamente usando -o.