Envoyer et recevoir des images

Product deprecation notice

Effective April 30th, 2026, Vonage In-App Messaging will no longer be available. Access for new users will be closed, and the service will be discontinued for all existing users.

If you have any questions regarding this product’s discontinuation, please contact your account manager or our support team.

Vue d'ensemble

Ce guide traite de l'envoi et de la réception d'images dans le cadre d'une conversation.

Avant de commencer, assurez-vous que ajouter le SDK à votre application et vous êtes en mesure de créer une conversation.

NOTE: A step-by-step tutorial to build a chat application is available here.

Ce guide s'appuie sur les concepts suivants :

  • Événements de conversation - message les événements qui se déclenchent sur une conversation, une fois que vous êtes membre

Envoyer une image

Vous êtes déjà membre d'une conversation :

// Scenario #1: Send an image from a URL
conversation.sendMessage({
    "message_type": "image",
    "image": {
        "url": "https://example.com/image.jpg"
    }
}).then((event) => {
    console.log("message was sent", event);
}).catch((error)=>{
    console.error("error sending the message", error);
});

// Scenario #2: Upload an image from a file input to Vonage, then send
// Note: the URL will need to be downloaded using the fetch image method mentioned in the next section.
    
const fileInput = document.getElementById('fileInput');
const params = {
    quality_ratio : "90",
    medium_size_ratio: "40",
    thumbnail_size_ratio: "20"
}
conversation.uploadImage(fileInput.files[0], params).then((imageRequest) => {
    imageRequest.onreadystatechange = () => {
        if (imageRequest.readyState === 4 && imageRequest.status === 200) {
            try {
                const { original, medium, thumbnail } = JSON.parse(imageRequest.responseText);
                const message = {
                    message_type: 'image',
                    image: {
                        url: original.url ?? medium.url ?? thumbnail.url
                    }
                }
                return conversation.sendMessage(message);
            } catch (error) {
                console.error("error sending the image", error);
            }
        }
        if (imageRequest.status !== 200) {
            console.error("error uploading the image");
        }
    };
    return imageRequest;
}).catch((error) => {
    console.error("error uploading the image ", error);
});

Recevoir l'URL d'une image

A message sera reçu lorsqu'un membre envoie une image dans une conversation :

conversation.on('message', (sender, event) => {
  if (event.body.message_type === 'image'){
    console.log('*** Image sender: ', sender);
    console.log('*** Image event: ', event);
  }
});

Télécharger des images de Vonage

Client web

Pour télécharger une image, vous devez utiliser la fonction récupérer l'image méthode.

Client mobile (Android, iOS)

Pour télécharger une image, vous devez ajouter un JWT à la demande de récupération d'image. Le JWT est transmis en tant qu'en-tête d'autorisation (Authorization: Bearer <JWT> ). Il s'agit du JWT utilisé pour connecter l'utilisateur.

Les différentes bibliothèques d'images gèrent les en-têtes de requête différemment. Vous trouverez ci-dessous des exemples complets pour les bibliothèques les plus populaires. Notez que le JWT est défini comme l'en-tête Authorization pour la requête :

// ==== LOAD IMAGE USING COIL ==== 
// https://github.com/coil-kt/coil
private fun loadImageUsingCoil(url: String, jwt: String, context: Context) {
    imageView.load(
        Uri.parse(url),
        context.imageLoader,
    ) {
        addHeader("Authorization", "bearer $jwt")
    }
}

// ==== LOAD IMAGE USING GLIDE ==== 
// https://github.com/bumptech/glide
private fun loadImageUsingGlide(url: String, jwt: String, context: Context) {
    val build = LazyHeaders.Builder()
        .addHeader("Authorization", "bearer $jwt")
        .build()

    val glideUrl = GlideUrl(url, build)

    Glide.with(context)
        .load(glideUrl)
        .into(imageView)
}

// ==== LOAD IMAGE USING PICASSO ====
// https://github.com/square/picasso

// Define custom Authentication interceptor
class AuthenticationInterceptor(private val jwt: String) : Interceptor {
    override fun intercept(chain: Interceptor.Chain): Response = chain.request().let {
        val newRequest = it.newBuilder()
            .header("Authorization", "bearer $jwt")
            .build()

        chain.proceed(newRequest)
    }
}

// Create Picasso instance that uses the Authenticator
private fun getPicassoInstance(jwt: String): Picasso {
    val okHttpClient = OkHttpClient.Builder()
        .addInterceptor(AuthenticationInterceptor(jwt))
        .build()

    return Picasso.Builder(requireContext()).downloader(OkHttp3Downloader(okHttpClient)).build()
}

// Load image using custom picasso instance (that under the hood uses the authentication interceptor)
private fun loadImageUsingPicasso(url: String, jwt: String, context: Context) {
    getPicassoInstance(jwt)
        .load(url)
        .into(imageView)
}

Référence