美文网首页
vue中使用图片

vue中使用图片

作者: xueyueshuai | 来源:发表于2022-05-17 11:23 被阅读0次

第一种方案
标签内引入

    <img src="../assets/logo.png" alt="">
    <img src="@/assets/logo.png" alt="">
    <img src="~@/assets/logo.png" alt="">

2 引入后使用

// 引入方式1
// let img = require('@/assets/logo.png')
// 引入方式2 
import img from '@/assets/logo.png'
 
data() {
    return {
      img
    };
  },

3 css中使用

<template>
  <div class="bkg"></div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.bkg {
  width: 100px;
  height: 100px;
  background-image: url("~@/assets/logo.png");
  background-size: cover;
}
</style>

相关文章

网友评论

      本文标题:vue中使用图片

      本文链接:https://www.haomeiwen.com/subject/buzgurtx.html