new BMapGL.Icon(require("/static/index/images/gai.png") vue怎么引入本地图片
时间: 2023-11-30 10:03:29 浏览: 39
在 Vue.js 中引入本地图片可以使用 require 函数或者 import 语句,具体方法如下:
1. 使用 require 函数:
```vue
<template>
<div>
<img :src="imgUrl" alt="图片" />
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: require('@/assets/img/gai.png')
}
}
}
</script>
```
在上面的代码中,我们使用 require 函数来引入本地图片,并将图片路径赋值给 data 中的 imgUrl 变量,最后在模板中使用该变量来显示图片。
2. 使用 import 语句:
```vue
<template>
<div>
<img :src="imgUrl" alt="图片" />
</div>
</template>
<script>
import gai from '@/assets/img/gai.png'
export default {
data() {
return {
imgUrl: gai
}
}
}
</script>
```
在上面的代码中,我们使用 import 语句来引入本地图片,并将图片赋值给一个变量,最后在 data 中定义一个 imgUrl 变量,将该变量赋值为图片变量,最终在模板中使用该变量来显示图片。
需要注意的是,在使用 require 函数时,需要使用相对路径或者 @ 表示 src 目录,而在使用 import 语句时,需要使用相对路径或者 @ 表示 src 目录,并且需要在脚本中进行引入。