如何在Vue单文件组件（SFC）中导入和使用图片

在Vue单文件组件（SFC）中使用图片，可以通过以下几种方式实现：

方法1：直接在src中使用相对路径

最简单的方法是直接在src属性中使用相对路径引用图片。当你的图片存储在一个可以被你的web服务器访问的目录中时，这种方法很好用。

<template>
  <div id="app">
    <img src="./assets/tellmethecode_logo.svg" alt="tellmethecode">
  </div>
</template>

<script>
export default {
  // 如果使用直接路径，无需导入图片
};
</script>

<style lang="css">
/* 你在这里添加样式 */
</style>

方法2：作为模块导入并绑定到data

如果你更喜欢将图片作为模块导入并绑定到组件的数据中，可以按照以下方式操作：

<template>
  <div id="app">
    <img :src="tmtcLogo" alt="tellmethecode">
  </div>
</template>

<script>
import tmtcLogo from 'images/tellmethecode_logo.svg';

export default {
  data() {
    return {
      tmtcLogo: tmtcLogo
    };
  }
};
</script>

<style lang="css">
/* 你在这里添加样式 */
</style>

方法3：使用require进行动态导入

如果你想进行动态导入，或者当你想将图片路径作为JavaScript表达式使用时，可以使用require函数：

<template>
  <div id="app">
    <img :src="tmtcLogo" alt="tellmethecode">
  </div>
</template>

<script>
const tmtcLogoPath = './assets/tellmethecode_logo.svg';

export default {
  data() {
    return {
      tmtcLogo: require(tmtcLogoPath)
    };
  }
};
</script>

<style lang="css">
/* 你在这里添加样式 */
</style>

注意：使用require时，图片将作为静态资源包含在你的最终打包文件中。

相关文章：

本文标签: