当前位置： 首页 > news >正文

ElementUI的＜el-image＞组件引用网络图片加载失败

news 来源：原创 2025/5/9 15:44:32

1. 验证图片 URL 是否有效

直接访问图片链接，确保 URL 正确且可公开访问

  • 如果浏览器无法加载图片，可能是图片服务器限制了外链或已失效。

  • 解决方法：更换为可用的图片 URL。

2. 检查浏览器开发者工具

打开浏览器开发者工具（F12），查看以下信息：

  • Network 标签：检查图片请求的状态码。

    • 状态码 403：服务器拒绝访问（常见于防盗链）。

    • 状态码 404：图片路径错误。

  • Console 标签：查看是否有跨域错误（如 CORS 相关报错）。

3. 处理跨域问题（CORS）

如果图片托管在第三方服务器且返回跨域错误：

  • 后端代理：通过后端服务代理图片请求，绕过跨域限制。

  • CORS 头配置：在图片服务器设置 Access-Control-Allow-Origin: *。

4. 解决防盗链限制

部分图片服务器会校验 Referer 请求头，禁止外站直接引用。
解决方法：在 <el-image> 组件中设置 referrerpolicy="no-referrer"：

<el-image:src="scope.row.avatar"fit="fill"referrerpolicy="no-referrer"  <!-- 禁用 Referer 头 -->style="width: 50px; height: 50px; border-radius: 50%;"
></el-image>

5. 检查后端返回的数据格式

确保后端返回的 avatar 字段是完整的 URL 字符串且无转义问题：

{"id": 1,"username": "user1","avatar": "https://image.jpg"  // 确保 URL 未包含多余字符
}

6. 使用 <img> 标签测试

用原生 <img> 标签替代 <el-image>，验证是否是组件问题：

<template v-slot="scope"><img :src="scope.row.avatar"style="width: 50px; height: 50px; border-radius: 50%;"v-if="scope.row.avatar">
</template>

如果 <img> 可正常加载，可能是 ElementUI 组件配置问题。

相关文章：

ElementUI的＜el-image＞组件引用网络图片加载失败

1. 验证图片 URL 是否有效 直接访问图片链接&#xff0c;确保 URL 正确且可公开访问 如果浏览器无法加载图片&#xff0c;可能是图片服务器限制了外链或已失效。 解决方法&#xff1a;更换为可用的图片 URL。 2. 检查浏览器开发者工具 打开浏览器开发者工具&#xff08;F12…...

编程日记 2025/5/9 15:44:32

GitHub Pages + Jekyll 博客搭建指南(静态网站)

目录 &#x1f680; 静态网站及其生成工具指南&#x1f30d; 什么是静态网站&#xff1f;&#x1f4cc; 静态网站的优势⚖️ 静态网站 VS 动态网站 &#x1f680; 常见的静态网站生成器对比&#x1f6e0;️ 使用 GitHub Pages Jekyll 搭建个人博客&#x1f4cc; 1. 创建 GitHu…...

编程日记 2025/4/30 12:17:43

idea项目列表不出现，展示loading

2025年02月08 11:23:36 星期六 发生在webstorm中&#xff0c;跟其他idea类似 原因是将 ignore 插件升级到 4.5.5 版本 https://github.com/JetBrains/idea-gitignore/pull/933 解决方案&#xff1a;将ignore版本将为 4.5.4 我是将 4.5.5 降低为 4.5.4 正常显示文件夹了。...

编程日记 2025/5/5 1:11:40

多智能体协作架构模式：驱动传统公司向AI智能公司转型

前言 在数字化浪潮的席卷下&#xff0c;传统公司的运营模式正面临着前所未有的挑战。随着市场竞争的日益激烈&#xff0c;客户需求的快速变化以及业务复杂度的不断攀升&#xff0c;传统公司在缺乏 AI 技术支撑的情况下&#xff0c;暴露出诸多痛点。在决策层面&#xff0c;由于…...

编程日记 2025/5/8 5:02:07

新增md、html压缩文档上传，开放接口访问密钥改为多个，zyplayer-doc 2.4.7 发布啦！

zyplayer-doc是一款适合企业和个人使用的WIKI知识库管理工具&#xff0c;支持在线编辑富文本、Markdown、表格、Office文档、API接口、思维导图、Drawio以及任意的文本文件&#xff0c;专为私有化部署而设计&#xff0c;最大程度上保证企业或个人的数据安全&#xff0c;支持以内…...

编程日记 2025/5/5 23:56:16

w~Transformer~合集5

我自己的原文哦~ https://blog.51cto.com/whaosoft/12406495 #transformer~x1 太可怕了都到6了 太强~~ DeepMind 表示&#xff0c;他们提出的算法蒸馏&#xff08;AD&#xff09;是首个通过对具有模仿损失的离线数据进行顺序建模以展示上下文强化学习的方法。同时基于观察…...

编程日记 2025/5/6 8:06:01

Dubbo 3.x源码(29)—Dubbo Consumer服务调用源码(1)服务调用入口

基于Dubbo 3.1&#xff0c;详细介绍了Dubbo Consumer服务调用源码。 此前我们学习了Dubbo服务的导出和引入的源码&#xff0c;现在我们来学习Dubbo服务调用的源码。 此前的文章中我们讲过了最上层代理的调用逻辑(服务引用bean的获取以及懒加载原理)&#xff1a;业务引入的接口…...

编程日记 2025/5/7 9:56:53

Linux内核同步机制：确保系统稳定与高效

在复杂而庞大的 Linux 系统世界中&#xff0c;内核就如同一位有条不紊的指挥官&#xff0c;协调着各种任务和资源的分配。而其中&#xff0c;内核同步机制则是确保整个系统稳定与高效运行的关键要素。想象一下&#xff0c;众多的进程和线程在 Linux 内核的舞台上同时登场&#…...

编程日记 2025/5/6 12:41:42

firebase简介

Firebase 是一个由 Google 提供的移动应用开发平台&#xff0c;旨在帮助开发者快速构建和管理应用程序。它提供了一系列强大的工具和服务&#xff0c;特别适合用于开发和管理 Web 和移动应用。以下是 Firebase 的一些核心功能&#xff1a; 实时数据库&#xff1a;Firebase 提供…...

编程日记 2025/5/7 7:31:22

利用Termux在安卓手机中安装 PostgreSQL

利用Termux在安卓手机中安装 PostgreSQL ⬇️Termux下载 点击下载 在 Termux 中安装 PostgreSQL 可以按照以下步骤进行&#xff1a; 1. 更新 Termux 包管理器 先更新软件包列表和已安装的软件包&#xff1a; pkg update && pkg upgrade -y2. 安装 PostgreSQL 使…...

编程日记 2025/5/7 17:45:20

windows安装WSL完整指南

本文首先介绍WSL&#xff0c;然后一步一步安装WSL及Ubuntu系统&#xff0c;最后讲解如何在两个系统之间访问和共享文件信息。通过学习该完整指南&#xff0c;能帮助你快速安装WSL&#xff0c;解决安装和使用过程中的常见问题。 理解WSL&#xff08;Windows Subsystem for Linux…...

编程日记 2025/5/9 15:20:42

Windows Docker笔记-安装docker

安装环境 操作系统&#xff1a;Windows 11 家庭中文版 docker版本&#xff1a;Docker Desktop version: 4.36.0 (175267) 注意&#xff1a; Docker Desktop 支持以下Windows操作系统&#xff1a; 支持的版本&#xff1a;Windows 10&#xff08;家庭版、专业版、企业版、教育…...

编程日记 2025/5/9 7:24:39

ReactNative进阶（五十九）：存量 react-native 项目适配 HarmonyOS NEXT

文章目录 一、前言二、ohos_react_native2.1 Fabric2.2 TurboModule2.2.1 ArkTSTurboModule2.2.2 cxxTurboModule&#xff1a; 三、拓展阅读 一、前言 2024年10月22日19:00&#xff0c;华为在深圳举办“原生鸿蒙之夜暨华为全场景新品发布会”&#xff0c;主题为“星河璀璨&…...

编程日记 2025/5/9 15:07:08

[x86 ubuntu22.04]进入S4失败

目录 1 问题描述 2 解决过程 2.1 查看内核日志 2.2 新建一个交换分区 2.3 指定交换分区的位置 1 问题描述 CPU&#xff1a;G6900E OS&#xff1a;ubuntu22.04 Kernel&#xff1a;6.8.0-49-generic 使用“echo disk > /sys/power/state”命令进入 S4&#xff0c;但是无法…...

编程日记 2025/5/8 4:08:02

Java面试题-MySQL数据库

文章目录 1.事务1.事务的特性 ACID2.并发事务问题3.undo log 和redo log的区别&#xff1f;4.事务的隔离性是如何保证的呢&#xff1f;解释一下MVCC&#xff1f; 2.索引1.如何定位慢查询&#xff1f;2.explain3.了解过索引吗&#xff1f;索引的底层数据结构B树和B树对比4.什么是…...

编程日记 2025/5/8 17:13:00

为什么Vue的data属性是函数而不是对象

Vue中data属性设计为函数而非对象的原因是解决组件复用时的数据隔离问题。确保每个实例维护独立的数据副本&#xff0c;避免数据共享导致的状态污染。 而根实例因为只会被创建一次(不会被复用)&#xff0c;所以可以直接用对象&#xff0c;不会有这个问题。 组件一般都会被多个实…...

编程日记 2025/5/9 13:56:10

网络工程师 （26）TCP/IP体系结构

一、层次 四层&#xff1a; 网络接口层&#xff1a;TCP/IP协议的最底层&#xff0c;负责网络层与硬件设备间的联系。该层协议非常多&#xff0c;包括逻辑链路和媒体访问控制&#xff0c;负责与物理传输的连接媒介打交道&#xff0c;主要功能是接收数据报&#xff0c;并把接收到…...

编程日记 2025/5/9 13:47:30

MySQL部署基于二进制日志文件位置的主从复制集群

MySQL主从复制介绍 MySQL 主从复制&#xff08;Master-Slave Replication&#xff09; 作为一种经典的数据库复制方案&#xff0c;被广泛应用于企业生产环境&#xff0c;尤其是在提升数据库性能、实现数据备份和分布式扩展方面具有重要作用。 官方文档&#xff1a;https://de…...

编程日记 2025/5/9 13:52:41

【系统设计】Spring、SpringMVC 与 Spring Boot 技术选型指南：人群、场景与实战建议

在 Java 开发领域&#xff0c;Spring 生态的技术选型直接影响项目的开发效率、维护成本和长期扩展性。然而&#xff0c;面对 Spring、SpringMVC 和 Spring Boot 这三个紧密关联的框架&#xff0c;开发者常常陷入纠结&#xff1a;该从何入手&#xff1f;如何根据团队能力和业务需…...

编程日记 2025/5/9 14:07:59

【CAPL实战】LIN调度表操作

文章目录 前言1、linChangeSchedTable切换调度表2、linStartScheduler开启调度表3、linStopScheduler停止调度表 前言 在LIN调度表Schedule Table文章中&#xff0c;详细介绍了LIN调度表的信息&#xff0c;那么如何在CAPL脚本测试中进行LIN调度表的操作呢&#xff1f; 1、linC…...

编程日记 2025/5/5 1:04:40

「vue3-element-admin」告别 vite-plugin-svg-icons！用 @unocss/preset-icons 加载本地 SVG 图标

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template &#x1f33a; 仓库主页&#xff1a; GitCode︱ Gitee ︱ Github &#x1f496; 欢迎点赞 &#x1f44d; 收藏 ⭐评论 …...

编程日记 2025/5/9 14:17:10

[图文]课程讲解片段-Fowler分析模式的剖析和实现01

​ 解说&#xff1a; GJJ-004-1&#xff0c;分析模式高阶Fowler分析模式的剖析和实现&#xff0c;这个课是针对Martin Fowler的《分析模式》那本书里面的模式来讲解&#xff0c;对里面的模式来剖析&#xff0c;然后用代码来实现。 做到这一步的&#xff0c;我们这个是世界上独…...

编程日记 2025/5/9 14:02:30

element-plus el-tree-select 修改 value 字段

element-plus el-tree-select 修改 value 字段 &#xff0c;不显示label 需要注意两个地方&#xff1a; <el-tree-select v-model"value" :data"data" multiple :render-after-expand"false" show-checkbox style"width: 240px" …...

编程日记 2025/5/9 14:19:52

软件测评实验室CNAS认证能力验证什么时机做？如何查询能力验证相关信息？

能力验证是软件测评实验室申请CNAS认证前必须要做的一类质量活动。CNAS软件测评实验室初次认可和扩大认可范围时&#xff0c;申请认可的每个子领域应至少参加过一次相关领域的能力验证且获得满意结果。通过认定认可后&#xff0c;只要存在可获得的能力验证&#xff0c;不同类目…...

编程日记 2025/5/9 15:31:24

Spring Boot 3.4 中 MockMvcTester 的新特性解析

引言 在 Spring Boot 3.4 版本中&#xff0c;引入了一个全新的 MockMvcTester 类&#xff0c;使 MockMvc 测试可以直接支持 AssertJ 断言。本文将深入探讨这一新特性&#xff0c;分析它如何优化 MockMvc 测试并提升测试的可读性。 Spring MVC 示例 为了演示 MockMvcTester 的…...

编程日记 2025/5/9 15:08:44

网安加·百家讲坛 | 刘志诚：以业务为中心的网络安全挑战与机遇

作者简介&#xff1a;刘志诚&#xff0c;乐信集团信息安全中心总监、OWASP广东区域负责人、网安加社区特聘专家。专注于企业数字化过程中网络空间安全风险治理&#xff0c;对大数据、人工智能、区块链等新技术在金融风险治理领域的应用&#xff0c;以及新技术带来的技术风险治理…...

编程日记 2025/5/9 15:02:38

配置 VS Code 调试 ROS Python 脚本：完整步骤

在 Ubuntu 系统上使用 ROS 和 VS Code 进行 Python 开发时&#xff0c;可能会遇到一些环境配置的问题&#xff0c;特别是当需要加载 ROS 环境变量以及确保正确使用 Python 3 环境时。以下是如何配置 launch.json 和 tasks.json 来确保 VS Code 调试环境能够正确加载 ROS 和 Pyt…...

编程日记 2025/5/4 21:16:04

HTTP4种方法（GET、POST、 PUT和DELETE）

一、GET 和 POST 1. GET方法 特点&#xff1a; 用途&#xff1a;用于从服务器获取数据。 参数传递方式&#xff1a;参数会附加在URL后面&#xff0c;以 keyvalue的形式&#xff0c;通过查询字符串传递&#xff0c;例如&#xff1a; http://example.com/page?nameJohn&…...

编程日记 2025/5/9 15:20:41

AnythingLLM开发者接口API测试

《Win10OllamaAnythingLLMDeepSeek构建本地多人访问知识库》见上一篇文章&#xff0c;本文在上篇基础上进行。 1.生成本地API 密钥 2.打开API测试页面&#xff08;http://localhost:3001/api/docs/&#xff09; 就可以在页面测试API了 2.测试获取用户接口(/v1/admin/users) 3…...

编程日记 2025/5/9 15:21:42

CSS定位简介

目录 一、静态定位&#xff08;Static Positioning&#xff09; 二、相对定位&#xff08;Relative Positioning&#xff09; 三、绝对定位&#xff08;Absolute Positioning&#xff09; 四、固定定位&#xff08;Fixed Positioning&#xff09; 五、黏性定位&#xff08;…...

编程日记 2025/5/8 5:32:57

CentOS服务器部署Docker+Jenkins持续集成环境

一、准备工作 一台运行 CentOS 的服务器&#xff0c;确保有足够的磁盘空间、内存资源&#xff0c;并且网络连接稳定。建议使用 CentOS 7 或更高版本&#xff0c;本文以 CentOS 7 为例进行讲解。 拥有服务器的 root 权限&#xff0c;因为后续安装软件包、配置环境等操作需要较…...

编程日记 2025/5/9 15:23:34

React受控组件的核心原理与实战精要

在 React 中&#xff0c;受控组件&#xff08;Controlled Component&#xff09; 是一种重要的模式&#xff0c;用于通过组件的状态来管理表单元素的值。这种模式不仅确保了数据的一致性和可预测性&#xff0c;还便于与其他功能&#xff08;如验证和格式化&#xff09;集成。本…...

编程日记 2025/5/9 15:28:24

基于python多线程多进程爬虫的maa作业站技能使用分析

基于python多线程多进程爬虫的maa作业站技能使用分析 技能使用分析 多线程&#xff08;8核&#xff09; import json import multiprocessing import requests from multiprocessing.dummy import Pooldef maa(st):url "https://prts.maa.plus/copilot/get/"m …...

编程日记 2025/5/9 15:06:19

Android studio怎么创建assets目录

在Android Studio中创建assets文件夹是一个简单的步骤&#xff0c;通常用于存储不需要编译的资源文件&#xff0c;如文本文件、图片、音频等 main文件夹&#xff0c;邮件new->folder-assets folder...

编程日记 2025/5/9 14:15:20

解锁 DeepSeek 模型高效部署密码：蓝耘平台全解析

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

编程日记 2025/5/9 15:32:24

【Spring相关知识】Spring应用如何优雅使用消息队列

文章目录 概述**核心概念****使用场景****快速入门**1. 添加依赖2. 配置 Binder3. 定义消息通道4. 发送和接收消息5. 运行应用 **高级特性****优点****适用场景** 概述 Spring Cloud Stream 是一个用于构建消息驱动微服务的框架&#xff0c;它基于 Spring Boot 和 Spring Inte…...

编程日记 2025/5/6 6:52:11

2025牛客寒假算法基础集训营4（补题）

C Tokitsukaze and Balance String (hard) 一道规律题。赛时以为是难的算法题&#xff0c;就没去碰了&#xff0c;实际上把几种情况列出来后可能就会发现&#xff0c;只有首尾相同的字符串才是平衡的。 首先我们容易发现&#xff0c;连续的1或者0是多余的&#xff0c;因为他们…...

编程日记 2025/5/6 13:21:08

.net一些知识点5

1.dot Net带out的参数如何使用 string name;//假设这个参数带out TestMethod(1,out name);//一定要有out 方法体中&#xff0c;一定要有out参数的赋值&#xff0c;并且能输出 2.参数的传递方式有哪些 a.值传递 b.引用传递 ref c.输出传递 out 3.设计模式知道哪些 3.us…...

编程日记 2025/5/9 14:55:17

基于Servlet简易学生信息管理系统

本次设计的学生信息管理系统&#xff0c;能提供以下功能&#xff1a; &#xff08;1&#xff09; 输入入学生信息并保存 &#xff08;2&#xff09; 显示所有学生信息 &#xff08;3&#xff09; 查询学生信息 &#xff08;4&#xff09; 修改学生信息并保存 &#xff08;…...

编程日记 2025/5/9 15:27:25

IDEA编写SpringBoot项目时使用Lombok报错“找不到符号”的原因和解决

目录 概述|背景 报错解析 解决方法 IDEA配置解决 Pom配置插件解决 概述|背景 报错发生背景&#xff1a;在SpringBoot项目中引入Lombok依赖并使用后出现"找不到符号"的问题。 本文讨论在上述背景下发生的报错原因和解决办法&#xff0c;如果仅为了解决BUG不论原…...

编程日记 2025/5/5 9:16:11

JVM图文入门

往期推荐 【已解决】redisCache注解失效&#xff0c;没写cacheConfig_com.howbuy.cachemanagement.client.redisclient#incr-CSDN博客 【已解决】OSS配置问题_keyuewenhua.oss-cn-beijing.aliyuncs-CSDN博客 【排坑】云服务器docker部署前后端分离项目域名解析OSS-CSDN博客 微服…...

编程日记 2025/5/5 2:11:43

【算法】动态规划专题⑨ —— 二维费用背包问题 python

目录 前置知识进入正题实战演练 前置知识 【算法】动态规划专题⑤ —— 0-1背包问题 滚动数组优化 python 进入正题 二维费用背包问题 方法思路 二维费用背包问题在传统背包问题的基础上增加了第二个维度的限制&#xff08;如重量&#xff09;。 每个物品具有两种费用&#x…...

编程日记 2025/5/4 11:54:38

链表专题-02

链表专题 /*** 链表的节点* param <E>*/ public class ListNode<E> {public E element;public ListNode<E> next;public ListNode() {}public ListNode(E element) {this.element element;}public ListNode(E element, ListNode<E> next) {this.eleme…...

编程日记 2025/4/27 13:27:03

亚远景-精通ASPICE：专业咨询助力汽车软件开发高效合规

在竞争日益激烈的汽车行业&#xff0c;软件开发已成为决定成败的关键因素。ASPICE&#xff08;汽车软件过程改进和能力确定&#xff09; 作为行业公认的软件开发框架&#xff0c;为汽车制造商和供应商提供了实现高效、合规开发的路线图。 然而&#xff0c;ASPICE 的实施并非易…...

编程日记 2025/5/7 14:23:35

HALCON 数据结构

目录 1. HALCON基本数据分类 1.1 图像相关数据 1.1.1 Image（图片） 1.1.2 Region（区域） 1.1.3 XLD（轮廓） 1.2 控制类数据 1.2.1 基本控制数据类型 1.2.2 handle（句柄） 2. 数组与字典 2.1 数组类型及特点 2.1.1 Iconic数组（Objects） 2.1.2 Control数组（Tu…...

编程日记 2025/5/6 20:12:32

动手写ORM框架 - GeeORM第一天 database/sql 基础

文章目录 1 初识 SQLite2 database/sql 标准库3 实现一个简单的 log 库4 核心结构 Session本文是7天用Go从零实现ORM框架GeeORM的第一篇。介绍了 SQLite 的基础操作（连接数据库，创建表、增删记录等）。使用 Go 语言标准库 database/sql 连接并操作 SQLite 数据库，并简单封装…...

编程日记 2025/5/8 13:41:01

ubuntu conda运行kivy时报“No matching FB config found”

错误描述&#xff1a;本人使用ubuntu自带的python环境运行kivy是没有问题的&#xff0c;就是在使用conda时发生了错误&#xff0c;去网上寻找报错原因&#xff0c;却一直没有头绪&#xff08;这个问题有诸多问题导致的&#xff0c;不敢说用我的这个方法100%能好&#xff09; 1…...

编程日记 2025/5/6 14:59:35

SSM开发(十一) mybatis关联关系多表查询(嵌套查询，举例说明)

目录 一、背景介绍 二、一对一查询(嵌套查询) 三、一对多查询(嵌套查询) 四、嵌套查询效率评估 注：关联查询则是指在一个查询中涉及到多个表的联合查询 一、背景介绍 当对数据库的操作涉及到多张表，这在面向对象语言如Java中就涉及到了对象与对象之间的关联关系。针对多…...

编程日记 2025/5/4 4:56:00

【AIGC】冷启动数据与多阶段训练在 DeepSeek 中的作用

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AIGC | ChatGPT 文章目录 &#x1f4af;前言&#x1f4af;冷启动数据的作用冷启动数据设计 &#x1f4af;多阶段训练的作用阶段 1&#xff1a;冷启动微调阶段 2&#xff1a;推理导向强化学习&#xff08;RL&#xff0…...

编程日记 2025/5/4 17:45:56

Spring(26) spring-security-oauth2 官方表结构解析

目录 一、什么是 spring-security-oauth2&#xff1f;二、spring-security-oauth2 的表结构2.1 oauth_client_details 客户端详细信息表2.2 oauth_access_token 认证授权Token记录表2.3 oauth_refresh_token 刷新授权Token记录表2.4 oauth_code 授权Code记录表 一、什么是 spri…...

编程日记 2025/5/8 5:12:35