Maison > interface Web > Voir.js > le corps du texte

Comment introduire img dans vue.js

coldplay.xixi
Libérer: 2020-11-17 15:28:17
original
2268 Les gens l'ont consulté

Comment introduire img dans vue.js : 1. L'image est renvoyée au chemin de l'image réseau via le backend ; 2. L'image est introduite via require, le code est [imgUrl : {src : require( '../assets/images) /index/banner.png')}].

Comment introduire img dans vue.js

[Recommandations d'articles connexes : vue.js]

vue.js présente img Méthode :

Pour résoudre le problème,

renvoyez simplement l'image sur le chemin de l'image réseau via le backend.

            <div class="banner-item"
              :style="{&#39;background&#39;: `url(${$base.urlImage}${item.shufflingUrl})`,&#39;background-size&#39;:&#39;cover&#39;}"
                 ></div>
Copier après la connexion

Solution 2

Introduction d'images via require

  <script>
      export default {
          data() {
              return {
                  imgUrl: {
                      src: require(&#39;../assets/images/index/banner.png&#39;),
                  }
              }
          }
      }
  </script>
Copier après la connexion
  <script>
      require oBanner from &#39;../assets/images/index/banner.png&#39;
      export default {
          data() {
              return {
                  imgUrl: {
                      src: oBanner,
                  }
              }
          }
      }
  </script>
Copier après la connexion

Ce qui précède introduit le problème de non-affichage pour deux types d'images. J'espère que cela aide tout le monde.

Recommandations d'apprentissage gratuites associées : javascript (vidéo)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal