Comment changer dynamiquement l'attribut src d'une image dans uniapp

Avec l'utilisation généralisée des applications mobiles, le développement de la technologie front-end s'est progressivement déplacé du Web vers le terminal mobile. L'adaptation aux différentes plateformes de terminaux mobiles est devenue un enjeu que les développeurs doivent prendre en compte. Pour cette raison, une variété de frameworks mobiles ont émergé parmi ces frameworks, le framework uniapp est progressivement devenu le choix le plus populaire parmi les développeurs. Dans le framework uniapp, je pense que de nombreux développeurs seront confrontés au problème de la modification dynamique du src de l'image lors du traitement des images. Cet article expliquera en détail la solution à ce problème.

1. Utilisation du composant image dans uniapp

Dans le framework uniapp, l'introduction d'images nécessite l'utilisation du composant image. La syntaxe est la suivante :

<template>
    <image :src="imageUrl"></image>
</template>

<script>
    export default {
        data() {
            return {
                imageUrl: 'https://www.example.com/example.jpg'
            }
        }
    }
</script>

Dans le code ci-dessus, nous lions l'attribut src du composant image via le. Instruction v-bind. Une variable imageUrl est définie. Cette variable est définie dans data, et sa valeur initiale est l'URL d'une image. De cette façon, le composant image restituera l’image correspondante via cette URL.

Lorsque nous devons changer dynamiquement le src de l'image dans le composant, nous devons changer la valeur de cette variable. Remarque : Nous ne pouvons modifier que la valeur définie par la variable, car la modification directe de l'attribut src du composant n'est pas valide.

2. Modifier dynamiquement le src de l'image dans le composant image

Dans uniapp, nous pouvons ajouter une logique dans la méthode pour modifier la valeur de imageUrl afin de la refléter sur la page. Nous ajoutons d'abord un bouton sous la zone du modèle et ajoutons un événement de clic addImage au bouton. Le code est le suivant :

<template>
    <view>
        <image :src="imageUrl"></image>
        <button @tap="addImage">添加图片</button>
    </view>
</template>

Ensuite, nous définissons un tableau vide images sous la zone de script pour stocker l'URL de l'image et définissons un compteur. , en utilisant Pour compter le nombre d'images :

<script>
    export default {
        data() {
            return {
                imageUrl: '',
                images: [],
                count: 0
            }
        },
        methods: {
            addImage() {
                let num = ++this.count;
                let url = `https://www.example.com/example${num}.jpg`;
                this.images.push(url);
                this.imageUrl = url;
            }
        }
    }
</script>

Dans la méthode addImage, nous utilisons un compteur pour générer une URL d'image unique, la plaçons dans le tableau images, puis attribuons la dernière URL à imageUrl. Étant donné que la variable imageUrl est liée à l'attribut src du composant image, lorsque la valeur de la variable change, l'image sera automatiquement actualisée. De cette façon, nous atteignons l'objectif de changer dynamiquement le src de l'image dans le composant image.

3. Résumé

Grâce à l'introduction de cet article, nous pouvons savoir que dans uniapp, pour changer dynamiquement le src de l'image dans le composant image, il suffit de changer la valeur de la variable dans le composant. Cette méthode est non seulement simple et facile à mettre en œuvre, mais peut également répondre à la nécessité de modifier le composant src au moment de l'exécution. J'espère que cet article pourra aider tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!