Vue.js从数据库取图片

Vue.js从数据库取图片

要求：将表中的内容（图片、文字）在页面渲染出来

表内容：

最终效果：

1. VUE

2. 数据库

1-1:HTML
PS:[item.”表：字段名”]

<!-- 主体图片/文字开始 -->
	<div class="content_imgText">
		<h3>皮蛋瘦肉粥</h3>
		<ul class="content_imgText_ul">
			<!-- 使用for语句将内容渲染出来 -->
			<li v-for="(item,key) in list" @touchstart.stop.prevent="_this($event)">
				<div class="content_imgText_ul_img">
					<img :src="url+item.img" alt="图片不存在">
				</div>
				<p>{{item.name}}</p>
				<p>¥{{item.Price}}</p>
			</li>
		</ul>
	</div>
<!-- 主体图片/文字结束 -->

1-2: CSS
略…

1-3: JS
data(){ return{ url:'http://localhost:8005/', list:[], //保存数据 },

// 生命周期函数：在渲染成HTML或者模版编译进路由前调用created
created(){
	this.fetchData()
},
methods:{
	fetchData(){
		//通过get方式获取数据
		this.$http.get(this.url+"phpvue/take.php").then((response)=>{
			this.list=response.body;
		},(err)=>{
			console.log(err);
		})
	}
}

2-1:XAMPP

2-2:设置站点
PS：最后获取到的图片就是图片中的images文件中的图片

2-3:建立表
PS：新建表存储数据。图片的数据类型是varchar

2-4:新建php文件连接数据库