Error: Cannot find module ‘./XXX.jpg‘ 问题解决 Vue动态显示图片

article/2025/9/23 4:48:04

刚开始学习Vue
在循环输出图片时,浏览器报错Error: Cannot find module ‘./tqwl.jpg’
这张图片是放在本地文件夹内的
在这里插入图片描述
这是图片的展示代码

<el-table-column label="展示" width="180"><template slot-scope="scope"><el-imagestyle="width: 100px; height: 100px":src="imgformat(scope.row)"></el-image><span style="margin-left: 10px">{{ scope.row.mtprice }}</span></template></el-table-column>

这是根据数据库存放的部分路径完善成完整路径,能够直接被读取的那种。
下面定义的两种img都可以使用,我用的也是require方法。

imgformat(row) {let lj = row.mtImg + ".jpg";let img = require("../../src/assets/images/MilkTea/" + lj);// let img =require('@/assets/images/MilkTea/' + lj );// let img2 =require('@/assets/images/MilkTea/mxlc.jpg'  );// // this.$message(row.mtImg);return img;},

在写好完善路径方法后,我发现页面还是报错,除非我用规定好的路径,例如img2。
我又仔细的观察了一遍浏览器的报错,发现报错的是一张叫做tqwl.jpg的图片Error: Cannot find module ‘./tqwl.jpg’
我去图片文件夹里看了看,终于发现了这张图片跟其他图片的不同。
虽然都是.jpg结尾的图片,但是tqwl是以.JPG结尾的,他是大写的!!!!
我把他转换成.jpg就不报错了????
是的,不能直接修改图片的后缀,用图片编辑器打开图片然后另存为设置成.jpg格式。
花了我好多时间,下次要认真观察浏览器错。


http://chatgpt.dhexx.cn/article/JvQOtI90.shtml

相关文章

解决js中获取不到图片路径的情况

在写一个todoList作品时&#xff0c;需要点击事件更改图片路径时&#xff0c;遇到了获取不到图片路径的情况 在html中用src“”来获取的图片&#xff0c;凭主观臆想觉得在js中判断它的路径时&#xff0c;没有作用&#xff0c;控制台中显示的不是我们熟悉的路径格式 查阅得知&a…

vue-quill-editor删除服务器多余图片

这几天在做富文本编辑业务&#xff0c;在删除服务器资源方面遇到了问题&#xff0c;网上搜索了很久都没找到办法&#xff0c;现在把自己解决的过程记录如下&#xff1a;思路&#xff1a; 点击工具栏的图标&#xff0c;选取图片&#xff08;不是base64格式&#xff09;上传到服…

将JS代码隐藏在图片中的方法

之前写过利用图片重写的方法清除图片中恶意代码的文章&#xff0c;java清除恶意代码 &#xff0c;但这些图片中的恶意代码是怎么植入进去的呢&#xff0c;有简便方法&#xff0c;也有复杂方法。先来看如下这张图片&#xff0c;是Google的LOGO&#xff0c;是一张完全正常的png图…

VUE-QUILL-EDITOR安装与调节图片大小记录

一、quill-editor安装 安装quill-editor npm install vue-quill-editor --save安装调节图片大小插件(不是必须的&#xff0c;看需求) npm install quill-image-resize-module -S二、 引用&#xff08;两种方式&#xff09; 全局引用 在main.js中填入以下代码 import Vue f…

将js/css脚本放到png图片中的实践。

起因 高级浏览器支持data协议,如: 参考:http://en.wikipedia.org/wiki/Data:_URL <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6…

[JS插件] PhotoSwipe 图片浏览插件使用方法

一、介绍 PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone、iPad、黑莓6,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。 官方网站&#xff1a;http://photoswipe.com/ 源码下载&#xff1a;https://github.com/dimsemenov/photo…

原生js 图片查看器

将以前用angular 写的 自定义指令 封装成 插件&#xff0c;无需引用jquery、angular。 下载下来即可查看效果。 github网址: GitHub - wzhGitH/imgView: js 图片查看器,H5图片预览(imgView) 百度云下载链接: 百度网盘 请输入提取码 密码: gidq 可实现放大、缩小、拖拽、旋转…

vue-quill-editor拖拽或粘贴的图片上传到服务器回显插入图片后删除生成的Base64图片

问题描述&#xff1a;拖拽或粘贴图片上传到服务器后返回url插入富文本编辑器后&#xff0c;quill默认生成的base64图片链接也同时出现在富文本编辑器中&#xff0c;等于是有两张相同的图片&#xff0c;一张是我们服务器图片&#xff0c;一张是base64格式图片&#xff01;&#…

Unity3D在UI中加入Image图片

在将图片拖入到Assets后发现根本不能将图片拖入到UI中&#xff1a; 新建Image后在Source Image中也不能找到图片&#xff1a; 那是因为你没把图片设置为Sprite&#xff0c;图片只是Texture而已&#xff0c;只能作为贴图使用。 可以将图片设置为Sprite: 这样一切就正常了&#…

纯JS图片查看器

目前支持&#xff1a;放大、缩小&#xff08;含滚轮&#xff09;、旋转、还原 /*** 说明信息* date 2022/10/13 19:46:44* 初始化图片查看器* date 2022/09/21 14:40:06* id 唯一标识&#xff0c;指定id区域内的图片* params 扩展参数&#xff0c;设置图片大小&#xff0c;目前…

vue-quill-editor上传图片

问题&#xff1a; vue-quill-editor富文本编辑器上传图片默认为base64&#xff0c;存入数据库过于过于庞大&#xff0c;使用quill-image-extend-modulevue-quill-editor实现图片地址上传。 解决完之后效果图&#xff1a; 解决思路&#xff1a; 哈哈&#xff0c;第一步当然去…

unity UI 加入image图片

1.新建画布&#xff0c;新建image. 2.我们发现这个时候把Assets里的图片直接拖到Image上是行不通的。原因就是此时的图片没有设为sprite. 处理方法&#xff1a;点击图片&#xff0c;修改Texture Type为Sprite. 下图左边图片为调整后&#xff0c;右边图片为没有调整. 3.调整后就…

js预览本地图片

本地图片在上传服务器前&#xff0c;如何预览效果&#xff1f; 一个方法就可以了&#xff0c;主要是如何从事件中读取文件数据&#xff0c;放到<img>展示 幸运的是&#xff0c;事件中的图片数据已经被转换成<img>可直接识别的内容&#xff0c;直接赋值给<img&g…

python QT 图片缩放,移动

python QT graphicsView控件实现图片的缩放与移动 1、效果图2、界面搭建3、实现方法3.1、构建处理图元的类3.1、绘制图像3.2、拖拽方法实现3.3、缩放方法实现 4、调用方法 1、效果图 选择图片后可在graphicsView窗口中显示选择的图片&#xff0c;可以用鼠标拖拽图片。当鼠标停…

Unity UI修改Image中的图片资源

Unity UI修改Image中的图片资源 一、取资源文件 把资质文件放到Assets文件夹下Resources文件中。 二、在属性面板下修改图片类型 三、在脚本中修改需要修改的资源 Sprite sprite Resources.Load(“Images/2”); //Images文件夹下名为2的图片 Image2.sprite sprite; //修改…

Linux命令scp用法

本文主要讲的是scp用法如果哪里不对欢迎指出&#xff0c;主页https://blog.csdn.net/qq_57785602?typeblog scp 可以在win系统使用&#xff0c;本文百分之八十写的是win系统怎么使用&#xff0c;在本地上到服务器文件,从服务器下载文件到本地 用工具连接到公司服务器时&#x…

linux远程cp命令,Linux cp scp命令使用

cp 拷贝命令&#xff0c;用来对文件或者子目录进行拷贝操作的。 scp 是secure copy的简写&#xff0c;用于在Linux下进行远程拷贝文件的命令&#xff0c;和它类似的命令有cp&#xff0c;不过cp只是在本机进行拷贝不能跨服务器&#xff0c;而且scp传输是加密的。可能会稍微影…

linux 使用scp命令,Linux scp命令使用实例汇总

Linux下要实现两台服务器之间的文件传送&#xff0c;使用scp命令就可以了&#xff0c;在Linux系统中&#xff0c;scp命令的用法简单而又实用&#xff0c;系统之家就给大家介绍下如何使用scp命令进行Linux服务器之间的文件传送。 scp是secure copy的简写&#xff0c;用于在Linux…

linux中scp命令用法

问题&#xff1a;经常用到文件分发到另一个机器&#xff0c;怎么做&#xff1f; 每次连接一个机器&#xff0c;把压缩包上传上去&#xff0c;然后解压修改&#xff0c;这样在太麻烦。linux的cp命令可以复制文件&#xff0c;能不能吧修改好的文件复制过去呢&#xff1f; 一、cp…

scp命令的使用

Linux scp 命令用于 Linux 之间复制文件和目录&#xff1b;scp 是 secure copy 的缩写, scp 是 linux 系统下基于 ssh 登陆进行安全的远程文件拷贝命令&#xff1b;scp 是加密的&#xff0c;rcp 是不加密的&#xff0c;scp 是 rcp 的加强版。 用法&#xff1a; scp [可选参数]…