vue 动态获取的图片路径不显示_Vue中img的src是动态渲染时不显示的解决

最新推荐文章于 2024-07-01 14:52:22 发布
最新推荐文章于 2024-07-01 14:52:22 发布
阅读量3.4k 收藏
点赞数
文章标签： vue 动态获取的图片路径不显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39917811/article/details/111839983
版权
本文介绍了在Vue项目中遇到动态渲染图片不显示的问题，分析了原因并提供了解决方案。当img的src是动态渲染时，直接赋值路径可能导致404错误。解决方法包括使用require引入图片，将图片放在static目录下，或者通过v-bind动态绑定src。
摘要由CSDN通过智能技术生成

Vue中img的src是动态渲染时不显示的解决

今天在项目中遇到一个需求，设计稿如下

就是展示用户头像，数据从后端获取，要是没有拿到则显示默认图片。

项目采用vue开发，本人也是第一次在实际项目中使用vue。

自然而然采用条件渲染，我的代码如下：

保存运行查看，发现没显示默认的图片，审查元素发现图片没有被打包

有点懵~

后来查阅资料发现图片使用require引入即可，更改后代码为：

搞定~

以上这篇Vue中img的src是动态渲染时不显示的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

时间： 2019-11-13

好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p

最低0.47元/天 解锁文章
weixin_39917811
关注
Qt：Label插入图片
大山喵写博客的地方
03-31 9491
第一种方法，在Qt Designer的属性编辑器里面手动添加： 直接添加想要的图片，所见即所得： 这种方法的优势是简单，缺点是只能够“赋初值”，而不是动态的给所需的Label插图。想“随时随地”插图，还是要手动敲代码，但好在也并不复杂。 void QFun::on_pushButton_clicked() { QImage image(QString("D:/1.jpg")); ui.l...
Vue中img的src是动态渲染时不显示的解决
01-19
今天在项目中遇到一个需求，设计稿如下 就是展示用户头像，数据从后端获取，要是没有拿到则显示默认图片。 项目采用vue开发，本人也是第一次在实际项目中使用vue。 自然而然采用条件渲染，我的代码如下： 保存运行查看，发现没显示默认的图片，审查元素发现图片没有被打包 有点懵~ 后来查阅资料发现图片使用require引入即可，更改后代码为： 搞定~ 以上这篇Vue中img的src是动态渲染时不显示的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue中动态引入图片
qq_41742576的博客
02-29 2238
可以看出普通加载的图片会被编译成/img/img.13eb2ff7.jpeg这种路径，而动态加载的还是原始路径，这是因为webpack或vite，会将代码编译，最终在内容内构造出一个类似于打包后的dist文件，而就会将普通方式图片路径编译转化成dist文件夹下img文件夹下的资源。很多时间，不管是vue2，还是vue3开发中都会遇到，动态渲染图片的功能，但是为什么我们直接将图片的路径直接赋值给变量的时候，图片渲染不出来，而通过require引入加载图片后却能正常渲染呢？（以下代码为vue3，vue2一样）
图片:scr=““动态路径无效
最新发布
Hanx_的博客
07-01 123
图片 :src="imgSrc" 动态路径不起作用，图片怎么都加载不出来。加上require就可以了。
QT学习：给label添加图片资源
zjy900507的博客
10-16 1万+
方法一： 首先，要在项目里添加一个资源文件。 然后给资源文件添加前缀，把我们自己的图片拷贝进去。 此处右击可以拷贝图片路径 在ui设计界面添加一个label，起名为labelpicture。 MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) { ui->setupUi(this); ui->labelpicture-&.
Qt之使用图片填充QLabel
明天你好的博客
01-18 2359
本文记录一下使用 QLabel 实现在我们设计的 ui 界面上显示指定的图片，即使用 label 插入图片。
QLabel添加背景图片，并且适应QLabel大小
Hello，小高同学
02-27 9189
QImage Image; Image.load("d:/test.jpg"); QPixmap pixmap = QPixmap::fromImage(Image); int with = ui->labPic->width(); int height = ui->labPic->height(); QPixmap fitp...
Qt 窗体使用 label 标签插入静态图片
weixin_30611509的博客
03-30 1669
最近在做毕业设计，上位机软件用的Qt，界面当中需要加入学校校徽，结果百度了n多种方法，有用QPixmap的： 1 QPixmap myPix("./school.jpg"); 2 ui->label_8->setPixmap(myPix); 3 ui->label_8->setScaledContents(true); 4 ui-...
vue中img src 动态加载本地json的图片路径写法
10-17
总结起来，Vue中动态加载本地JSON文件中的图片路径，需要确保JSON文件和图片都在`static`目录下，然后在Vue组件中使用`v-bind`和`require`函数结合动态方法来实现图片的动态加载。同时，记得在webpack配置中设置正确...
vue src动态加载请求获取图片的方法
10-17
在Vue.js应用中，动态加载图片是一项常见的需求，特别是在处理用户上传或服务器返回的图片时。本篇文章将详细讲解如何在Vue中通过`src`属性动态加载本地图片和请求获取的图片。 一、加载本地图片 1. **图片目录...
Qt中通过控件在Label标签中显示一张静态图片
11-27
Qt中通过控件在Label标签中显示一张静态图片
QT 在QLabel上加载图片 并在其上绘制矩形
08-22
QLabel 加载图片并绘制矩形图案 发出起始和结束的坐标
qt label中插入图片
Phil_Zhang001的博客
04-25 1398
方法2：setPixmap（）方法1：styleSheet。
QT学习（1） 给label添加图片资源
Kagamigawa Noelle
12-20 4829
自此开始记录学习QT的点点滴滴，虽然都是一些很简单的东西。慢慢来吧。 首先，要在项目里添加一个资源文件。  然后给资源文件添加前缀，把我们自己的图片拷贝进去。 此处右击可以拷贝图片路径 在ui设计界面添加一个label，起名为labelpicture。 MainWindow::MainWindow(QWidget *parent) : QMainWindow(par...
label添加图片
liguanshu的专栏
08-26 1691
做UI的时候我们可能想给某个Label添加一个背景图片，但查看的时候会发现好像只有设置背景颜色的方法，不过我们也可以通过这种方式来解决： UIColor *color = [UIColor colorWithPatternImage:[UIImage imageNamed:@"itemkaung2.png"]]; [myLabel setBackgroundColor:co
Qt中用QLabel显示图片
热门推荐
积累点滴，保持自我
02-20 3万+
关于QT设置图片的一些心得，转载自网络一篇博文，对自己帮助很大
Qt学习之使用QLabel加载图片并进行图像拼接
似末的博客
05-22 4410
本文介绍如何使用QLabel加载本地图片，将不同的图像进行拼接成一张图并保存至本地。主要用到QLabel、QPixmap、QImage、QPainter这几个类。
qt-C++笔记之QLabel加载图片
小勇博客
04-06 1382
例如，可以修改图像的大小，应用滤镜，调整颜色等。有时可能需要在两者之间转换，例如，可能会从文件中加载一个图像到。或其他控件中，以指定是否应该缩放控件的内容以填充控件的大小。如果正在处理视频流，并且有解码后的图像数据，通常会得到一个。以下是一个简化的例子，说明如何从视频流中的原始数据创建。更适合图像的离屏处理，例如图像的像素级操作。当从视频流中解码图像时，可能直接得到原始的帧数据，的大小，那么图片将会被裁剪。类中的一个函数，用于创建原始图像的缩放版本。是一个枚举值，指示应保持原始图像的宽高比。
vue获取图片路径后怎么显示图片
04-13
对于这个问题，我可以为您提供一些帮助。首先，您需要确保您已经正确获取了图片的路径。然后，您可以使用Vue的模板语法中的v-bind指令将路径绑定到img的src属性上，如下所示： <img v-bind:src="imagePath"> 其中，imagePath是您获取的图片路径。这样，当您的Vue组件被渲染时，img标签中的src属性将会被设置为正确的图片路径，从而显示您想要显示的图片。希望能帮助到您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值