Maison  >  Article  >  interface Web  >  Comment introduire img dans vue.js

Comment introduire img dans vue.js

coldplay.xixi
coldplay.xixioriginal
2020-11-09 16:42:462039parcourir

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>

Solution 2

Introduction d'images via require

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

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!

Déclaration:
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