vue3图片展示实战

首先得有一个vue3项目 教程: vue3项目搭建

我测试存在两种方式可以将本地图片进行展示到页面

  1. public文件夹下可以直接导入
  2. src下的asset文件夹下得图片需要在 script 标签内声明再导入
  3. 网页图片不可导入,应该是存在一种限制

1,创建文件demo1Image...vue文件

2,图片放入目录

3,再App.vue引入当前vue模块

代码:

bash 复制代码
<template>
<h4>图片展示</h4>
<div v-for="item in data" style="display: flex;">
<p>{{ item.id }}</p>
<p>{{ item.name }}</p>
<img :src="item.image" width="100" height="100">
</div>
</template>
<script>
import im from "@/assets/images/im1.png"
export default{
    
    data(){
        return{
            data: [
                { id: 1, "name": "yyx", image: "public/images/im1.png" },
                { id: 2, "name": "DDD", image: "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=5&spn=0&di=7348476013078118401&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3114821453%2C2075025625&os=1659478207%2C2462563011&simid=122776778%2C885222598&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=https%3A%2F%2Fbbs.qn.img-space.com%2Fg3%2FM00%2F00%2F1A%2FCg-40lobf-mIMPOAAA4x08fnBvYAAAKOQF1XPwADjHr561.jpg%3FimageView2%2F2%2Fw%2F1800%2Fq%2F90%2Fignore-error%2F1%2F&fromurl=ippr_z2C%24qAzdH3FAzdH3Fri5p5_z%26e3Bujg2gtw5_z%26e3Bv54AzdH3Frtv_9aal0nlm_z%26e3Bip4s&gsm=&islist=&querylist=&dyTabStr=MCwzLDEsMiw2LDQsNSw4LDcsOQ%3D%3D" },
                { id: 3, "name": "yyd", image: im },
            ],
        }
    }
}
</script>

结果展示:

相关推荐
m0_748461391 小时前
Spring Boot + Vue 项目中使用 Redis 分布式锁案例
vue.js·spring boot·redis
珍珠奶茶爱好者2 小时前
vue二次封装ant-design-vue的table,识别columns中的自定义插槽
前端·javascript·vue.js
Slice_cy2 小时前
深入剖析 Vue 响应式系统:从零实现一个精简版
vue.js
羊羊小栈3 小时前
基于「YOLO目标检测 + 多模态AI分析」的PCB缺陷检测分析系统(vue+flask+数据集+模型训练)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
晚星star3 小时前
在 Web 前端实现流式 TTS 播放
前端·vue.js
本末倒置1833 小时前
前端面试高频题:18个经典技术难点深度解析与解决方案
前端·vue.js·面试
不一样的少年_5 小时前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js
Zz_waiting.6 小时前
案例开发 - 日程管理 - 第六期
前端·javascript·vue.js·路由·router
A 风6 小时前
封装日期选择器组件,带有上周,下周按钮
开发语言·javascript·vue.js
Simon_He7 小时前
vue-markdown-renderer:比 vercel streamdown 更低 CPU、更多节点支持、真正的流式渲染体验
前端·vue.js·markdown