O problema de img em VUE: src carregando imagens dinamicamente, requer não pode ser usado casualmente

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 :srcvinculaçã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. requireDicas 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, requireque pode ser obtida dinamicamente usando -o.

Acho que você gosta

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