vue.js怎么引入img

vue.js引入img的方法：1、图片通过后端返回引入网络图片路径；2、通过require引入图片，代码为【imgUrl: {src: require('../assets/images/index/banner.png')}】。

【相关文章推荐：vue.js】

vue.js引入img的方法：

解决一

图片通过后端返回引入网络图片路径即可。

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

解决二

通过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>

以上就为两种图片引入不显示的问题。希望对大家有帮助。

相关免费学习推荐：javascript（视频）

以上就是vue.js怎么引入img的详细内容，更多请关注www.sxiaw.com其它相关文章！