vue.js怎么引入img

发布时间:2022-05-22 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue.js怎么引入img脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

vue.js怎么引入img

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

vue.js引入img的方法:

解决一

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

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

解决二

通过require引入图片

  <script>
      export default {
          data() {
              return {
                  imgUrl: {
                      src: require('../assets/images/index/banner.png'),
                  }
              }
          }
      }
  </script>
  <script>
      require oBanner From '../assets/images/index/banner.png'
      export default {
          data() {
              return {
                  imgUrl: {
                      src: oBanner,
                  }
              }
          }
      }
  </script>

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

相关免费学习推荐:javascript(视频)

以上就是vue.js怎么引入img的详细内容,更多请关注脚本宝典其它相关文章!

脚本宝典总结

以上是脚本宝典为你收集整理的vue.js怎么引入img全部内容,希望文章能够帮你解决vue.js怎么引入img所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:vue.js