vue项目中显示 网路路径的图片，报控制台报undefined

最新推荐文章于 2024-01-19 17:15:57 发布
原创 最新推荐文章于 2024-01-19 17:15:57 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

这个是因为 再第一次渲染的时候 你请求的数据还没有回来，即使你是再 created中请求的数据 但是vue的生命周期函数还是一直在往下执行的

记住图片的 src 属性也会发起网络请求 他找不到路径自然就会报错了

<img :src="api + list.img_url" />

在这里插入图片描述
其实可以 设置下 v-if 进行条件渲染

 <img v-if="list.img_url" :src="api + list.img_url" />

这样就不会在报错误 其实正常也不影响啥 的

vue项目中请求网络接口返回的图片url报错403解决方法
JackieDYH的博客
11-25 4370
网络接口都是有请求限制的，特别是图片字段值是绝对路径的情况，请求的时候就会报错403 forbidden，这个时候应该使用缓存的方式拿到请求图片的地址进行缓存，只要在请求到的图片链接前面加上https://images.weserv.nl/?url=图片url即可（这是一个专门缓存图片的网址） getImages( _url ){ if( _url !== undefined ){ let _u = _url.substring( 7 ); ret...
vue 使用axios请求数据控制台有返回接口数据，但是在.then中打印res.data为undefined...
热门推荐
weixin_30853329的博客
07-30 1万+
prveiw 有返回json数据，但是再.then里打印的res却是undefined。 再网上找了很多解决provisional headers are shown 的方法。都没有用！ （有很多种可能导致Request Headers 出现这个问题） 后来就把axios换成了resource, 就解决了 查了一些资料总结了下axios和resource...
Vue 动态加载本地图片路径 报错Cannot find module ‘./undefined‘
huxvhai123的博客
11-15 5702
<!-- 代码01 --> <li v-for="(item,index) in data"> <img :src="require('@/'+ item.imgpath)" /> </li> data为获取的json数据，是数据的集合(数组)，即类似这样[{...},{...},...,{...}]，imgpath是json里面本地图片的路径数据，像代码01这样写，img标签是写在一个v-for里面的，控制台是不会报任何错误的； <!-.
vue访问网络图片
qq_60633200的博客
10-02 1723
vue内的img或者element-ui里的el-avatar使用网络图片
[ vue3 + vite ] 在开发环境时可以正常访问图片路径，打包部署到服务器上却显示路径undefined问题
Hiny2y2的博客
01-19 836
在开发环境时是正常的，图片可以正常显示，但是打包部署到服务器之后，图片地址就变成undefined了，几番周折，在Stack Overflow上找到了解决方法，具体的路径要改成自己的。我原本使用vite文档中给的方法引用项目文件夹中的图片，然后再打包部署到服务器上图片就正常显示了。今天遇到了这个问题，记录一下。
Vue莫名奇妙出现undefined请求
qq_45690761的博客
05-22 1611
Vue莫名奇妙出现undefined请求 问题： 引起原因： 调用element ui 的el-image出现的 具体原因有大佬解释下吗？？？ 解决方法: //正确的 <el-image v-if="index" :src="item.imgUrl"></el-image> //错误的 <el-image :src="item.imgUrl"></el-image> 如果有大佬知道其中的原因，欢迎在下方的评论处留言呦！！！ ...
vue-cli 打包之后图片引用路径问题
AmberWu
05-02 4870
过完五一，感觉整个人跟废了一样，虽然五一期间也没做什么，就是感觉累，感觉困。但无奈今天还有一堆事情等我去做。 早上来先发了一版v5.0.1，开启项目新版的第一次！但是毫无疑问，出了很多问题，除了上次打包后js、css路径错误问题（详情请见：https://blog.csdn.net/AmberWu/article/details/79529363），这次出现了图片undefined的问题。 ...
jeecg vue3 中 初始化 JEditor 时 图片路径错误
04-02
好的，我现在要解决用户提到的Jeecg Vue3项目中JEditor初始化时图片路径错误的问题。首先，我需要理解用户的问题背景。用户在使用JEditor组件时，图片路径不正确，导致图片无法正常显示。可能的原因有很多，比如相对...
vue启动服务路径local出现undefined
最新发布
05-08
好的，我现在需要帮助用户解决在本地使用Vue启动服务时路径出现undefined的问题。首先，我需要了解用户遇到的具体情况。用户提到启动服务时路径...- 网络面板显示404的`undefined...`请求 - 页面白屏或资源加载失败
vue数据改变渲染问题_解决Vue中页面成功渲染数据undefined的问题
weixin_39701288的博客
01-14 2049
前言这个标题不太好取。本文需要下面的知识：https://zhuanlan.zhihu.com/p/260811233​zhuanlan.zhihu.com问题描述我最近的一个功能需求是通过axios获取我存储在COS中的json文件，同时渲染到页面上。而问题就是，axios可以成功获取数据，组件也可以成功渲染，但是控制台会报错[Vue warn]: Error in render: "TypeE...
vue 动态改变静态图片以及请求网络图片的实现方法
08-28
下面小编就为大家分享一篇vue 动态改变静态图片以及请求网络图片的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中出现最多的“undefined”错误，检查原因以及解决办法（亲测有效）
m0_70545163的博客
09-04 1万+
摘要：本文主要来讲讲vue中出现最多的"undefined"错误。
vue获取服务器路径图片显示,vue img图片路径和背景图片路径打包问题
weixin_39665847的博客
08-09 4063
当项目需要放到服务器子目录时候,会遇到这个图片打包问题,处理方法有两个:#A和#B#A 给所有资源配置相对路径'/'.A-1,找到 config->index.js里面，如下修改//举个栗子,当前服务器路径/访问路径是 127.0.0.1/wap/other/index.html//打包资源路径都用相对路径'/' ,这样就可以解决了.index: path.resolve(__dirname...
【vue】路径别名配置和本地、网络图片显示
当白的技术小窝 ( git : https://github.com/canwhite )
06-29 501
vue.config.js const path = require("path"); const resolve = dir => path.join(__dirname, dir) module.exports = { chainWebpack: (config) => { config.resolve.alias // 添加别名 .set('@', resolve('src')) .set("@libs",resolve('src/l
vue中img动态绑定src(网络图片https,http)
weixin_43608950的博客
04-28 6473
vue中img动态绑定src(网络图片https,http)
如何解决Vue无法显示网络图片的问题
hello world ！
08-22 7269
缘由 因为项目需求，项目中引用了图片的网络链接，但是发现了很奇怪的问题，图片链接如果在浏览器的地址栏中可以直接打开，如果在前端项目的Img标签中却无法被渲染。 如何解决 在vue项目中的头部添加meta标签 在index.html中添加：<meta name="referrer" content="no-referrer"> 或者在img标签中添加：<img referrerpolicy="no-referrer" src="xx"/> Referrer是什么 Referer是h
vue通过链接显示服务器上的图片_图片网站该如何做SEO优化？详细讲解图片优化技巧...
weixin_39782573的博客
12-02 768
通常，在网站搜索引擎优化的过程中，很多站长和SEOer经常忽略图片的优化，但事实上，每个网站都有很多图片，所以优化网站图片就像优化其他内容一样，成为搜索引擎优化的一个重要工作内容。如果你能成功地优化图片的搜索引擎优化排名，不仅能减少图片对网站的负影响，还能给网站带来不可低估的访问量。此外，一些大型搜索引擎也专门为图片编写了蜘蛛程序。那么，我们应该如何做好图片网站的图片优化呢？1、图片的原...
vue加载图片
qq_43505774的博客
07-11 1150
img加载图片根据src <img src=""/>//相对或绝对路径或资源路径 比如http://localhost:8000/tp5/publica/img/11.jpg <img :src=""/>//这里是data绑定的数据参数 里面的东西都会被当做参数进行解析 //所以相对绝对路径 只能在data里面设置 获取采用require('相对或者绝对路径') 一般我们使用webpack来进行图片处理 url-loader file-loader 超过url-loader大小就会
提问！同一ajax请求获取的图片路径，在谷歌浏览器能正确展示图片，在火狐浏览器则显示路径undefined...
weixin_30237281的博客
03-20 268
　　今天的工作学习之路遇见一个奇葩的问题，作为初级攻城狮的小生实在不知如何解决，都已经壁咚度娘一整天了，都未能解决问题，实属无奈，一开始认为是浏览器兼容的问题，但左看右看，也不是，也尝试过是不是页面加载与请求后没对应上，发现也不是，检查返回的结果，居然是undefined，可是在谷歌浏览器没有任何问题能正常展示图片，在火狐浏览器却是这样，来，看图说话： 首先此<img>标签为js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yunchong_zhao

帮到你了，请作者喝杯矿泉水可好

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值