Vue.js img src concatenar variable y texto

2 minutos de lectura

avatar de usuario
cetom

Quiero concatenar la variable Vue.js con la URL de la imagen.

Lo que calculé:

imgPreUrl : function() {
    if (androidBuild) return "android_asset/www/";
    else return "";
}

Si construyo para android:

<img src="https://stackoverflow.com/android_asset/www/img/logo.png">

Más

<img src="https://stackoverflow.com/questions/40255291/img/logo.png">

¿Cómo puedo concatenar la variable calculada con la URL?

Lo intenté:

<img src="https://stackoverflow.com/questions/40255291/{{imgPreUrl}}img/logo.png">

avatar de usuario
Dan Mindru

No puede usar curlies (etiquetas de bigote) en los atributos. Use lo siguiente para concatenar datos:

<img v-bind:src="https://stackoverflow.com/questions/40255291/imgPreUrl +"https://stackoverflow.com/questions/40255291/img/logo.png"">

O la versión corta:

<img :src="https://stackoverflow.com/questions/40255291/imgPreUrl +"https://stackoverflow.com/questions/40255291/img/logo.png"">

Obtenga más información sobre los atributos dinámicos en el documentos de vue.

En otro caso, puedo usar la plantilla ES6 literal con acentos graves, por lo que la tuya podría configurarse como:

<img v-bind:src="https://stackoverflow.com/questions/40255291/`${imgPreUrl()}img/logo.png`">

  • He intentado esto, pero parece que el paquete web se ejecuta antes de que se procesen los enlaces porque mi URL se envía al navegador como “@./assets/syndicate_images/34.jpg”

    – Muelles de Preston

    18 de diciembre de 2018 a las 15:29


  • imgPreUrl es una variable, no una función.

    – Azul

    23 de abril de 2019 a las 12:27

sólo inténtalo

<img :src="https://stackoverflow.com/questions/40255291/require(`${imgPreUrl}img/logo.png`)">

si maneja esto desde la base de datos, intente:

<img :src="https://stackoverflow.com/questions/40255291/baseUrl +"path/path' + obj.key +'.png'">

Si ayuda, estoy usando lo siguiente para obtener una imagen gravatar:

<img
        :src="`https://www.gravatar.com/avatar/${this.gravatarHash(email)}?s=${size}&d=${this.defaultAvatar(email)}`"
        class="rounded-circle"
        :width="size"
    />

avatar de usuario
Bedram tamang

Seguir ambos métodos es válido.

Método 1

concatenar con + firme y ajuste la cadena con comillas simples/dobles.

<img :src="imgPreUrl() + "https://stackoverflow.com/questions/40255291/img/logo.png"">

Método 2

Envolver con acento grave ` y envolver variables con ${variable}. Como imgPreUrl es un método entonces,

<img :src="`${imgPreUrl()}img/logo.png`">

avatar de usuario
Ares

Para mí, dijo que el Módulo no se encontró y no funcionó. Finalmente, encontré esta solución y funcionó.

<img v-bind:src="require('@' + baseUrl + 'path/path' + obj.key +'.png')"/>

Necesario agregar ‘@’ al comienzo de la ruta local.

  • Genial ~ Gracias : )

    – nasangW

    20 oct 2021 a las 5:44

¿Ha sido útil esta solución?