Vue 中使用静态资源的方式有以下几种:
- 直接使用 URL 地址: 在模板中直接使用静态资源的 URL 地址即可,如:
<img src="https://example.com/img/logo.png" alt="Logo">
- 使用 require 语句: 通过
require
语句引入静态资源文件,如:
<template>
<div>
<img :src="require('@assets/logo.png')" alt="Logo">
</div>
</template>
- 使用
import
语句: 通过import
语句引入静态资源文件,并将其作为模块导入,如:
<template>
<div>
<img :src="logo" alt="Logo">
</div>
</template>
<script>
import logo from '@assets/logo.png'
export default {
data() {
return {
logo
}
}
}
</script>