vue里面动态渲染图片?

最新推荐文章于 2024-08-07 15:01:52 发布

顾洛笙

最新推荐文章于 2024-08-07 15:01:52 发布

阅读量1.6k

点赞数

分类专栏： JavaScript vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_56491274/article/details/129307111

版权

本文介绍了在Vue.js应用中动态渲染图片的步骤：首先将图片存放在public文件夹下，然后将图片路径存入数组，接着在模板中通过v-for指令遍历数组动态显示图片，最后调整图片的样式。

摘要由CSDN通过智能技术生成

1.把图片放在public 文件夹下面

请添加图片描述
2.把图片存在一个数组里面

	<script setup>
	      let boxArr = [
	        //图片1
	        {
	          id: 1,
	          headerLeft: "#交互设计",
	          headerRight: "11648#",
	          imgSrc: "/img/1.jpg",
	          fotterTitle: "翻页动画书小人书趣味连环画 手翻书互动",
	          fotterLeft: "2021-05-02",
	          footerRight: "#点赞",
	          moveX: 0,
	          moveY: 0,
	        },
	      ];
	</script>

 .

3.使用图片

	<template>
		  <!-- 结构 -->
		  <div class="box">
		    <!-- 居中框 -->
		    <div class="center">
		      <!-- 开始展示 -->
		      <div class="pucture" v-for="(item,index) in boxArr" :key="item.id">
		       <img :src="item.imgSrc" alt&#