vue2 和vue3动态绑定src

article/2024/4/20 15:08:16

vue2:

webpack 创建的vue2可以通过 require对图片进行动态绑定

<script>
export default{data(){return{list:[{id:1,img:require("./assets/logo.png")},{id:2,img:require("./assets/logo.png")},{id:3,img:require("./assets/logo.png")}]}}
}

但vite创建的vue3则不可以通过require对图片进行动态绑定

可以通过一下方法进行绑定(注意vite根目录是/,且vite会自动解析src中的字符串) 该方法在vue3中我并未测试,如果没效果 ,往下看其他方法

<script setup>
import { reactive } from "@vue/reactivity"const getImg = (name)=>{return `/src/assets/${name}.png`
}
const zyc = reactive({list:[{id:1,img:getImg("logo")},{id:2,img:getImg("logo")},{id:3,img:getImg("logo")}]
})
</script>

vue3:

在需要动态绑定src的时候,还是按照之前常规的方法 require(‘xxxx’ + 变量)

  		<div:class="['tag-item', currentSystem == item.code ? 'activeTag' : '']"v-for="(item, index) in schoolTagsList":key="index"@click="getCurrentTypeSchoolList(item)"><img class="tag-icon" :src="require(`../../assets/img/${item.code}.png`)" alt="" /> {{ item.value}}</div>

控制台报错

ReferenceError: require is not defined

解决

在vite中不能使用require引入图片资源,因为这里的require貌似是webpack提供的一种加载能力,由于我们并非使用的webpack作为项目的构建工具,我们使用的是Vite,因此这里必须转用 Vite提供的静态资源载入,vite关于这一部分的官方说明在这里,有兴趣的小伙伴可以看官方的文档:Vite中静态资源处理;

 官网案例解析如下:

可能不大好理解,简单的说 new URL 一共接收两个参数,第一个参数即图片的路径,这里就是对应require中的值,第二个参数是vite的一个全局变量,可以理解成直接写死了 import.meta.url

需要改下成如下

 		<div:class="['tag-item', currentSystem == item.code ? 'activeTag' : '']"v-for="(item, index) in schoolTagsList":key="index"@click="getCurrentTypeSchoolList(item)"><img class="tag-icon" :src="getImageUrl(item.code)" alt="" />{{ item.value }}</div><script>export default {setup() {const getImageUrl = (code) => {return new URL(`../../../assets/img/${code}.png`, import.meta.url).href;};return {getImageUrl,};},}
</script>

还有一种待测试方法是 根据官网提示:就是在将asset 前面加上src。

<img v-if="post.welcomeScreen" :src="`/src/assets/blogPhotos/${name}.jpg`" alt="" />

而直接用import这种方式可以在vue2 或者vue3都可以用

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

接下来对vite提供的new URL 和import.meta.url。这两种新知识做一个详解:

new URL()

创建一个新 URL 对象的语法:

new URL(url, [base])
  • url —— 完整的 URL,或者仅路径(如果设置了 base),
  • base —— 可选的 base URL:如果设置了此参数,且参数 url 只有路径,则会根据这个 base 生成 URL。

显而易见:

const path = new URL(`../assets/blogPhotos/${name}.jpg`, import.meta.url);

../assets/blogPhotos/${name}.jpg是相对路径,而import.meta.url 是base url (根链接)。

可以将这个path打印出来:

 

{
hash: ""
host: "localhost:3000"
hostname: "localhost"
href: "http://localhost:3000/src/assets/blogPhotos/coding.jpg"
origin: "http://localhost:3000"
password: ""
pathname: "/src/assets/blogPhotos/coding.jpg"
port: "3000"
protocol: "http:"
search: ""
searchParams: URLSearchParams {}
username: ""
}

其中有一个属性是href,正好是函数的返回值!

import.meta

import.meta 对象包含关于当前模块的信息。

它的内容取决于其所在的环境。在浏览器环境中,它包含当前脚本的 URL,或者如果它是在 HTML 中的话,则包含当前页面的 URL。

因此可以把import.meta 打印出来:

console.log(import.meta);

 

可以看到,它有一个属性就是url。

综上,终于理解了上面的那个函数。

function getImageUrl(name) {return new URL(`../assets/blogPhotos/${name}.jpg`, import.meta.url).href;
}


http://www.ngui.cc/article/show-1007572.html

相关文章

java并发-通信工具类

文章目录1 Semaphore1.2 Semaphore简介1.2 Semaphore案例1.3 Semaphore原理2 Exchanger3 CountDownLatch3.1 CountDownLatch简介3.2 CountDownLatch案例4 CyclicBarrier4.1 CyclicBarrier简介4.2 CyclicBarrier Barrier被破坏4.4 CyclicBarrier原理在java.util.concurrent包下&…

浅谈Dubbo的异步调用

之前简单写了一下dubbo线程模型&#xff0c;提到了Dubbo底层是基于NIO的Netty框架实现的&#xff0c;通过IO线程池和Work线程池实现了请求和业务处理之间的异步从而提升性能。 这篇文章要写的是Dubbo对于消费端调用和服务端接口业务逻辑处理的异步&#xff0c;在2.7版本中Dubb…

1650_MIT 6.828 open函数的简单梳理

全部学习汇总&#xff1a; GreyZhang/g_unix: some basic learning about unix operating system. (github.com) 一个shell的例程分析了很长时间&#xff0c;里面的基础知识一层嵌套一层。不过&#xff0c;这也是补充基本知识的很好的机会。既然自己日常接触的更多的还是这种通…

C++ 15 string容器

目录 一、string容器 1.1 简介 1.2 构造函数 1.3 赋值操作 1.4 字符串拼接 1.5 字符串查找和替换 1.6 字符串比较 1.7 字符串存取 1.8 字符串插入和删除 1.9 子串获取 一、string容器 1.1 简介 ① string是C风格的字符串&#xff0c;而string本质上是一个类。 ② s…

TryHackMe-Sustah(boot2root)

Sustah 开发人员在他们的游戏中添加了反作弊措施。你是 能否突破限制以访问其内部 CMS&#xff1f; 端口扫描 循例 nmap Web枚举 80端口没啥东西&#xff0c;看一下8085端口 gobuster扫一下 /ping似乎没什么东西 回来home&#xff0c;看看burp 使用bash生成数字字典 使用ff…

【mongodb 基础2】Install MongoDB Community Edition on macOS

文章目录一. 安装准备Install Xcode Command-Line ToolsInstall Homebrew二. Installing MongoDB 6.0 Community Edition1. 下载MongoDB Homebrew 组件包2. 更新组件包3. 安装MongoDBTo install MongoDB三. 安装后包含的组件四. Run&stop MongoDB1. 作为macOS服务的方式运行…

计算机二级考试(C++)复习

文章目录基础知识部分C知识点部分C流操作基础知识部分 指令周期&#xff1a; 一般把计算机完成一条指令所花费的时间称为一个指令周期。指令周期越短&#xff0c;指令执行就越快。 顺序程序&#xff1a; 顺序程序具有顺序性、封闭性和可再现性的特点&#xff0c;使得程序设…

用 Java 演奏千千阙歌是什么体验?

JFugue简介 ​JFugue 是一个开放源代码编程库&#xff0c;它允许人们使用 Java 编程语言来编程音乐&#xff0c;而无需 MIDI 的复杂性。它由 David Koelle 于 2002 年首次发布。当前版本是 JFugue 5.0&#xff0c;已于 2015 年 3 月发布。Brian Eubanks 将 JFugue 描述为 “对于…

一个看起来非常科幻的人脸识别接口与其实现逻辑,用于二次开发

前言看起来非常高端的人脸识别接口&#xff0c;简单的进行二次开发就可以衍生为人脸识别考勤系统、人脸识别安全系统等等&#xff1b;展厅以及实现逻辑启动界面点击“是”&#xff1a;人脸已经录入数据库&#xff0c;识别失败弹出Warning可能因为误判&#xff0c;重新识别&…

Unity即时战略/塔防项目实战(一)——构造网格建造系统

Unity即时战略/塔防项目实战&#xff08;一&#xff09;—— 构造网格建造系统 效果展示 Unity RTS游戏网格建造系统实现原理 地形和格子划分&#xff0c;建造系统BuildManager构建 地形最终需要划分成一个一个的小方格&#xff0c;首先定义一下小方格&#xff1a; private…