Vue3学习:vite项目中图片不能显示,报错 require is not defined

今天做了一个案例“给你喜欢的人送花”,如果喜欢谁,就给谁送花,最多可以送5朵。运行效果如下。
图1
这个项目是使用 npm create vite@latest 命令创建的。
包括2个组件:

  • 根组件App.vue
  • 子组件HelloVote.vue。
    目录结构如图所示:
    图2
    然而在运行这个项目的时候,却出现了问题,App.vue中4张图片不能正常显示。
<template><div class="wrapper"><h2>给你喜欢的人送花</h2><ul><li v-for="(item, index) in list" :key="index"><div class="imgvote"><img :src="item.poet" :alt="item.name"></div><HelloVote :sendto="item.name">喜欢</HelloVote></li></ul></div>
</template>

对应的JavaScript中,代码为

data(){return{list: [{ poet: require('./assets/liu.png'), name: '柳永', },{ poet: require('./assets/su.png'), name: '苏轼', },{ poet: require('./assets/xin.png'), name: '辛弃疾', },{ poet: require('./assets/li.png'), name: '李清照', },]]}
}

查看控制台,报错" require is not defined",require未定义。

在这里插入图片描述

于是到网上一通搜索,找到几篇文章,说是vite不支持require,要想使其支持,需要安装一个插件,还需要修改一些对应的配置文件。
安装插件简单,执行对应的命令即可。可是配置文件那里我有些看不明白,不知道该从哪里修改,甚至不知道配置文件具体是哪个。
后来又找到一篇文章,文中提到的方法不需要安装插件,不需要修改配置文件,只需要换种写法,不用require即可。我照做,果然问题解决,图片正常显示。
修改后的代码如下:

data() {return {list: [{ poet: new URL(`./assets/liu.png`, import.meta.url).href, name: '柳永', },{ poet: new URL(`./assets/su.png`, import.meta.url).href, name: '苏轼', },{ poet: new URL(`./assets/xin.png`, import.meta.url).href, name: '辛弃疾', },{ poet: new URL(`./assets/li.png`, import.meta.url).href, name: '李清照', },],}},

修改前后对比:

//修改前
{ poet: require('./assets/liu.png'), name: '柳永', },
//修改后
{ poet: new URL(`./assets/liu.png`, import.meta.url).href, name: '柳永', }, 

new URL()这里使用了模板字符串,在本例中,使用普通的单引号或双引号字符串也可以。
只不过模板字符串可以支持动态URL。例如:

function getImageUrl(person) {return new URL(`./assets/${person}.png`, import.meta.url).href
}

这种解决方法来源于vite官网(https://vitejs.cn/vite5-cn/guide/assets.html),感兴趣的话可以前往查看,这是vite官网的部分截图。

在这里插入图片描述

案例完整的代码如下:

一、App.vue

<script>
import HelloVote from './components/HelloVote.vue'
export default {data() {return {list: [{ poet: new URL('./assets/liu.png', import.meta.url).href, name: '柳永', },{ poet: new URL('./assets/su.png', import.meta.url).href, name: '苏轼', },{ poet: new URL("./assets/xin.png", import.meta.url).href, name: '辛弃疾', },{ poet: new URL(`./assets/li.png`, import.meta.url).href, name: '李清照', },],// list: [// 	{ poet: require('./assets/liu.png'), name: '柳永', },// 	{ poet: require('./assets/su.png'), name: '苏轼', },// 	{ poet: require('./assets/xin.png'), name: '辛弃疾', },// 	{ poet: require('./assets/li.png'), name: '李清照', },// ],}},components: {HelloVote,},
}
</script>
<template><div class="wrapper"><h2>给你喜欢的人送花</h2><ul><li v-for="(item, index) in list" :key="index"><div class="imgvote"><img :src="item.poet" :alt="item.name"></div><HelloVote :sendto="item.name">喜欢</HelloVote></li></ul></div>
</template>
<style scoped>
ul,
li {list-style: none;
}.wrapper {width: 80vw;margin: 0 auto;display: flex;justify-content: center;flex-direction: column;
}.wrapper ul {display: flex;justify-content: space-between;
}h2 {text-align: center;
}.wrapper li {text-align: center;
}.imgvote {width: 16vw;height: 20vw;margin-bottom: 1rem;
}.imgvote img {width: 100%;height: 100%;border: 1px solid #ccc;
}
</style>

二、HelloVote.vue

<script>
export default {data() {return {count: 0,}},props: ['sendto'],methods: {onClick() {if (this.count < 5) {this.count++;}}},
}
</script>
<template><div><button class="btn" @click="onClick"><slot></slot>{{ sendto }}</button><span>🌹x{{ count }}</span></div>
</template>
<style scoped>
.btn {border: 1px solid #ccc;padding: 5px;border-radius: 5px;cursor: pointer;outline: none;font-size: 16px;width: 110px;
}.btn:hover {background-color: #ff8400;color: #fff;
}
</style>

三、main.js

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

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

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

相关文章

秋招面试题记录_半结构化面试

c八股(可能问的多一点) 1.简单说说C11语法特性 答&#xff1a; 1.auto以及decltype自动类型推导&#xff0c;避免手动声明复杂类型&#xff0c;减少冗长代码提升了可读性和安全性。 2.智能指针 自动释放内存 (具体说说) 有shared和unique 差异主要体现在所有权、内存开销、…

Java项目-基于springboot框架的校园在线拍卖系统项目实战(附源码+文档)

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 开发运行环境 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/…

Java的walkFileTree方法用法【FileVisitor接口】

在Java旧版本中遍历文件系统只能通过File类通过递归来实现&#xff0c;但是这种方法不仅消耗资源大而且效率低。 NIO.2的Files工具类提供了两个静态工具方法walk()和walkFileTree()可用来高效并优雅地遍历文件系统。walkFileTree()功能更强&#xff0c;可自定义实现更多功能&am…

Git中Update和Pull的区别

在本文中&#xff0c;我们将介绍Git中的两个操作——”Update”和”Pull”&#xff0c;并解释它们之间的区别。 1、“Update”的含义和用法 “Update”是Git中用于更新本地仓库和工作区的操作。它的作用是将远程仓库中的最新变更同步到本地。当我们执行”Update”操作时&…

(二十)、从宿主机访问 k8s(minikube) 发布的 redis 服务

文章目录 1、环境准备2、具体操作2.1、启动 minikube (start/stop)2.2、准备 redis-deployment.yaml2.3、执行 redis-deployment.yaml2.3.1、查看 pod 信息和日志 2.4、检查部署和服务状态2.4.1、如果需要删除 3、查看 IP 的几个命令3.1、查看IP的几个命令3.2、解读3.3、宿主机…

Apache 出现 “403 forbidden“ 排查方法

1、检查运行 Apache 进程的用户没有对目录具备读取权限 如果该用户没有对 Directory 指定的目录具备适当的读取权限&#xff0c;就会导致 403 错误。 ​​例如&#xff1a;使用用户apache启动Apache进程&#xff0c;但是apache用户对 Directory 指定的目录没有读取权限 2、检查…

k8s的部署和安装

k8s的部署和安装 一、Kubernets简介及部署方法 1.1 应用部署方式演变 在部署应用程序的方式上&#xff0c;主要经历了三个阶段&#xff1a; 传统部署&#xff1a;互联网早期&#xff0c;会直接将应用程序部署在物理机上 优点&#xff1a;简单&#xff0c;不需要其它技术的参…

Python基础09_类和对象(下)迭代器和生成器函数式编程

一、类和对象(下) 1、封装 封装是指隐藏类的实现细节&#xff0c;让使用者不用关心这些细节; 封装的目的是让使用者通过尽可能少的方法(或属性)操作对象 Python的封装是假的&#xff08;模拟的&#xff09;封装 私有属性和方法 python类中以双下划线(__)开头&#xff0c;不…

AI 通俗理解强人工智能和弱人工智能

强人工智能&#xff08;Strong AI&#xff09;和弱人工智能&#xff08;Weak AI&#xff09;是两种不同类型的人工智能系统&#xff0c;它们的目标、能力和应用范围有很大的区别。 生活化例子 想象你有两个助手&#xff1a; 弱人工智能助手&#xff1a;你让它查资料、翻译、…

HarmonyOS Next模拟器异常问题及解决方法

1、问题1&#xff1a;Failed to get the device apiVersion. 解决方法&#xff1a;关闭模拟器清除用户数据重启

电子商务网站维护技巧:保持WordPress、主题和插件的更新

在这个快节奏的数字时代&#xff0c;维护一个电子商务网站的首要任务之一是保持WordPress、主题和插件的最新状态。过时的软件不仅可能导致功能故障&#xff0c;还可能带来安全风险。本文将深入探讨如何有效地更新和维护您的WordPress网站&#xff0c;以确保其安全性和性能。 …

【天池比赛】【零基础入门金融风控 Task2赛题理解】【2.3.6】

【天池比赛】【零基础入门金融风控 Task2赛题理解】【2.3.1-2.3.5】 2.3.6 变量分布可视化 2.3.6.1 单一变量分布可视化 对于 pandas.core.series.Series 类型的变量&#xff1a; index&#xff1a;含义&#xff1a;它表示 Series 对象的索引&#xff0c;也就是每个数据点对…

Docker-Consul概述以及集群环境搭建

文章目录 一、Docker consul概述二、consul 部署1.consul服务器2.registrator服务器&#xff08;客户端&#xff09;2.consul-template&#xff08;在consul服务器&#xff09;3.consul 多节点 一、Docker consul概述 容器服务更新与发现&#xff1a;先发现再更新&#xff0c;…

Leetcode 347 Top K Frequent Elements

题意&#xff1a; 求前k个出现频率最高的元素 首先得到一个频率图这是肯定的&#xff0c;下一步要考虑建立一个堆&#xff0c;堆中保存着前k个频率最大的数字&#xff0c;这个怎么做&#xff0c;可以用customized cmp来做&#xff0c;把数字存进去完事儿。注意这里不用 保存所有…

FFmpeg 4.3 音视频-多路H265监控录放C++开发三 :安装QT5.14.2, 并将QT集成 到 VS2019中。

一&#xff0c;安装QT&#xff0c; 重点&#xff1a;在安装QT的时候要安装msvc201x版本的组件&#xff0c; 二 &#xff0c; 安装 qt-vs-tools Index of /development_releases/vsaddin/2.8.1 三&#xff0c;需要安装过 windows10 SDK&#xff0c;一般我们在安装vs2019的时候就…

【MR开发】在Pico设备上接入MRTK3(三)——在Unity中运行MRTK示例

在前面的文档中&#xff0c;介绍了如何在Unity工程中配置号MRTK和Pico SDK 【MR开发】在Pico设备上接入MRTK3&#xff08;一&#xff09;在Unity中导入MRTK3依赖【MR开发】在Pico设备上接入MRTK3&#xff08;二&#xff09;在Unity中配置Pico SDK 本文将介绍如何运行一个简单…

Docker 安装sql server 登陆失败

错误&#xff1a; Sqlcmd: Error: Microsoft ODBC Driver 18 for SQL Server : SSL Provider: [error:0A000086:SSL routines::certificate verify failed:self-signed certificate]. Sqlcmd: Error: Microsoft ODBC Driver 18 for SQL Server : Client unable to establish co…

【virtuoso】sp测电阻

电路测量原理&#xff1a; 1. 电路原理图 2. 仿真设置 点击select&#xff0c;在原理图选择port设置sp扫频范围 3. plot图像 3.1 plot电阻图像 由公式可得&#xff0c;电阻值为阻抗的实部&#xff0c;所以 1. 选择 ZP 2. 绘制real 3. 点击Z11 4. 即可看到电阻值 3.2 plot电容图…

C++第七讲:STL--list的使用及模拟实现

C第七讲&#xff1a;STL--list的使用及模拟实现 1.list的使用1.1list是什么1.2构造、析构、赋值运算符重载1.3迭代器1.4empty、size、max_size1.5front、back1.6assign -- 代替1.7push_back和emplace_back1.8emplace1.9insert、erase、swap、resize、clear1.10find1.11splice1.…

CSDN Markdown 编辑器语法大全

Markdown 是一种轻量级标记语言&#xff0c;它以简洁、易读易写的特点&#xff0c;被广泛应用于技术文档、博客文章、笔记等领域。CSDN 的 Markdown 编辑器为用户提供了丰富的功能&#xff0c;让用户能够轻松地创建格式规范、内容丰富的文档。以下是一份详细的 CSDN Markdown 编…