vue前后端显示图片
时间: 2023-11-19 22:06:19 浏览: 42
在Vue中,可以使用`<img>`标签来显示图片。在后端,需要将图片存储在服务器上,并提供一个URL来访问该图片。以下是一些步骤:
1. 在Vue组件中使用`<img>`标签,并将`src`属性设置为图片的URL,例如:
```html
<template>
<div>
<img :src="imageUrl" alt="My Image">
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: 'http://localhost:8888/img/singerPic/wanglihong.jpg'
}
}
}
</script>
```
2. 在后端,需要将图片存储在服务器上,并提供一个URL来访问该图片。可以使用Node.js和Express框架来实现。以下是一个简单的例子:
```javascript
const express = require('express')
const app = express()
app.use(express.static('public'))
app.listen(8888, () => {
console.log('Server is running on port 8888')
})
```
在上面的例子中,`express.static`中间件用于提供静态文件服务。将图片存储在`public`目录下,然后可以通过`http://localhost:8888/img/singerPic/wanglihong.jpg`来访问该图片。
3. 如果项目没有进行热部署的话,每次更新图片后都需要手动重启服务器才能正常显示图片。可以使用一些工具来实现自动重启,例如`nodemon`。