vue3图片展示实战

news2024/9/21 20:37:44

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

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

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

在这里插入图片描述
1,创建文件demo1Image…vue文件
2,图片放入目录
3,再App.vue引入当前vue模块
代码:

<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>

结果展示:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1611715.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ICLR 2024 | FTS-Diffusion: 用于合成具有不规则和尺度不变模式的金融时间序列的生成框架

ICLR 2024 | FTS-Diffusion: 用于合成具有不规则和尺度不变模式的金融时间序列的生成框架 原创 QuantML QuantML 2024-04-17 09:53 上海 Content 本文提出了一个名为FTS-Diffusion的新颖生成框架&#xff0c;用于模拟金融时间序列中的不规则和尺度不变模式。这些模式由于其独…

桌面软件使用到的开源库

想了解一下桌面软件开发中可能使用到的dll库 联想锁屏 libcef-常用概念-框架特点-CSDN博客 libcurl库使用详情、libcurl库的制作-CSDN博客 使用Cef和Qt做一个跨平台的多标签多窗口浏览器_cef3 多个标签-CSDN博客 cef 依赖的文件 libcef - Bigben - 博客园 (cnblogs.com) Q…

Cadence virtuoso 原理图创建边框

给原理图创建如下图的边框Creating a Sheet Border and Title edit-sheet size添加画布 选择画布尺寸&#xff0c;border size里面的A/B/C/D对应不同的画布尺寸。 添加好画布后&#xff0c;在edit-sheet tilte里面可以选择输入相关信息&#xff0c;如电路名称&#xff0c;日期&…

STM32 F103C8T6经验笔记15:国产芯片下载受限问题

今日使用DAP仿真器下载时的小问题&#xff1a; Not a genuine sT Device! Abort connection 错误&#xff1a;不是真正的ST设备&#xff01;中止连接。 问题解释&#xff1a; 这是因为下载时软件给你检测出这不是他们的正版芯片了&#xff0c;然后我查看了一下之前的购买记…

项目管理-项目范围管理

目录 一、概述 二、范围计划的编制 2.1 项目中包含的范围 2.1.1 产品范围 2.1.2 工作范围 2.1.3 总结 2.2 范围计划编制的成果 2.2.1 范围管理计划 2.2.1.1 概述 2.2.1.2 内容 三、创建工作分解结构 3.1 概述 3.2 WBS目的和用途 3.3 WBS分层结构 3.3.1 分层结构图…

python爬虫-----深入了解 requests 库下篇(第二十五天)

&#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; &#x1f388;&#x1f388;所属专栏&#xff1a;python爬虫学习&#x1f388;&#x1f388; ✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天…

[卷积神经网络]YoloV8

一、YoloV8 1.网络详解 ①backbone部分&#xff1a;第一次卷积的卷积核缩小(由3变为6)&#xff1b;CSP模块的预处理卷积从3次变为2次&#xff1b;借鉴了YoloV7的多分支堆叠结构&#xff08;Multi_Concat_Block&#xff09;。 所小第一次卷积的卷积核尺寸会损失部分感受野&#…

1.7jdk安装rpm的安装ssh加固

jk安装 [rootlocalhost ~]# java -version openjdk version "1.8.0_161"[rootlocalhost ~]# rpm -qa | grep java tzdata-java-2018c-1.el7.noarch python-javapackages-3.4.1-11.el7.noarch java-1.7.0-openjdk-1.7.0.171-2.6.13.2.el7.x86_64 java-1.8.0-openjdk-1…

会议文字记录工具【钉钉闪记】

当开会时&#xff0c;需要文字记录会议内容&#xff0c;但是打字又慢&#xff0c;可以使用钉钉闪记。 钉钉工作台直接搜索-钉钉闪记

【Pytorch】PytorchCPU版或GPU报错异常处理(10X~4090D)

Pytorch为CPU版或GPU使用报错异常处理 文章目录 Pytorch为CPU版或GPU使用报错异常处理0.检查阶段1. 在conda虚拟环境中安装了torch2.卸载cpuonly3.从tsinghua清华源安装不完善误为cpu版本4.用tsinghua清华源安装成cpu错误版本5.conda中torch/vision/cudatoolkit版本与本机cuda版…

openai whisper 语音转文字尝鲜

最近大模型很火&#xff0c;也试试搭一下&#xff0c;这个是openai 开源的whisper&#xff0c;用来语音转文字。 安装 按照此文档安装&#xff0c;个人习惯先使用第一个pip命令安装&#xff0c;然后再用第二个安装剩下的依赖&#xff08;主要是tiktoken&#xff09; https:/…

paho-mqtt 库揭秘

文章目录 **paho-mqtt 库揭秘**第一部分&#xff1a;背景介绍第二部分&#xff1a;paho-mqtt 是什么&#xff1f;第三部分&#xff1a;如何安装这个库&#xff1f;第四部分&#xff1a;库函数使用方法第五部分&#xff1a;场景应用第六部分&#xff1a;常见Bug及解决方案第七部…

【海思Hi3516CV610】是面向新一代视频编解码标准、网络安全和隐私保护、人工智能行业应用方面的IPC SoC

海思Hi3516CV610是面向新一代视频编解码标准、网络安全和隐私保护、人工智能行业应用方面的IPC SoC&#xff0c;除了开发普通摄像机&#xff0c;还可以打造极具竞争力的枪球一体机、双目长短焦摄像机产品&#xff1b; 处理器内核: 支持ARM Cortex-A7 MP2 时钟速率950MHz 支持…

[Linux][进程信号][二][信号如何被保存][信号处理][可重入函数]详细解读

目录 1.信号如何被保存&#xff1f;1.信号其他相关常见概念2.信号在内核中的表示3.sigset_t -- 本质是个位图4.信号集操作函数sigset_t&#xff1a;sigprocmask()sigpending() 5.思考6.使用 2.信号处理0.内核态和用户态1.内核空间和用户空间2.信号何时被处理&#xff1f;3.信号…

Python | Leetcode Python题解之第42题接雨水

题目&#xff1a; 题解&#xff1a; class Solution:def trap(self, height: List[int]) -> int:if not height:return 0n len(height)leftMax [height[0]] [0] * (n - 1)for i in range(1, n):leftMax[i] max(leftMax[i - 1], height[i])rightMax [0] * (n - 1) [he…

5.Vue项目目录结构

Vue项目目录结构 我们通过Vue命令行工具 npm init vuelatest 创建项目&#xff0c;会出现很多文件及文件夹 .vscode --- VSCode工具的配置文件夹 node_modules --- Vue项目的运行依赖文件夹 public --- 资源文件夹&#xff08;浏览器图标&#xff09; src ---…

关于某次授权的大型内网渗透测试(1)

前期渗透&#xff1a; 打点&#xff1a;&#xff08;任意文件上传&#xff09; 直接发现头像处任意文件上传&#xff0c;这里直接上传冰蝎即可。 tasklist查看杀软 System Idle Process 0 N/A System …

5.11 mybatis之returnInstanceForEmptyRow作用

文章目录 1. 当returnInstanceForEmptyRowtrue时2 当returnInstanceForEmptyRowfalse时 mybatis的settings配置中有个属性returnInstanceForEmptyRow&#xff0c;该属性新增于mybatis的3.4.2版本&#xff0c;低于此版本不可用。该属性的作用官方解释为&#xff1a;当返回行的所…

npm的配置文件及其路径问题

如何快捷修改.npmrc配置文件&#xff1f; .npmrc文件&#xff0c;就是npm的配置文件所在位置。 当然&#xff0c;寻找这个文件的目的&#xff0c;多数是为了修改.npmrc文件内容。 但npm提供了方便快捷的修改方式&#xff0c;不知道这个文件的位置&#xff0c;其实也是可以修改…

数据赋能(63)——要求:IT部门职责

“要求&#xff1a;IT部门职责”是作为标准的参考内容编写的。 在数据赋能中&#xff0c;IT部门职责在于以提供原始数据核心&#xff0c;确保提供原始数据是真实、及时和完整性&#xff0c;以支持业务赋能的实现。 在数据赋能中&#xff0c;IT部门职责涉及多个方面&#xff0c…