Vue里用el-image加载本地图片失败（Failed）

最新推荐文章于 2024-05-29 17:42:33 发布
最新推荐文章于 2024-05-29 17:42:33 发布
阅读量5.7k 收藏 11
点赞数 3
分类专栏： Element UI Vue3.0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xjh01/article/details/108332083
版权

在使用el-image组件加载本地图片（src/assets/logo/logo.png）时，总是提示Failed，图片显示不出来。
搜索后得知，要在路径前使用require加载
所以将引用路径改为下面截图后，就可以正常显示了
在这里插入图片描述
注意：引用过程中单双引号的配对

xjh01
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
el-image加载本地图片
weixin_35751412的博客
12-29 3584
可以使用以下方法来加载本地图片到 el-image 中: 使用 require 函数: <template> <el-image:src="require('@/assets/your-image.png')"></el-image> </template> 使用 require 函数并传入图片的相对路径: <template&g...
el-image显示不出来本地图片的问题
weixin_41171651的博客
05-04 984
使用el-image引入图片，会出现“FAILED” 的情况，把正常img标签中的src="@/assets/logo.png"换成:src="require(‘@/assets/logo.png’)"就可以了。 或者data中的数据为require也可以
el-image本地图片不显示，提示加载失败
最新发布
我是小鹏呀的博客
05-29 934
问题描述：el-image使用本地图片不显示，提示加载失败。
Element el-image 加载本地图片
cimbala的博客
05-16 7952
代码： <el-image :src="require('@/static/iconlibrary/allorders.png')" fit="contain"></el-image> 加载失败问题：   如果页面没有显示图片，检查一下自己是不是按需引入Element组件，忘记在main.js里面引入Image组件。 import { Button,Image } from 'element-ui'; import 'element-ui/lib/theme-chalk/index
在element中el-image如何显示本地图片
热门推荐
甜心的专栏
07-22 1万+
使用el-image引入图片，会出现“FAILED” 的情况，把正常img标签中的src="@/assets/logo.png"换成:src="require('@/assets/logo.png')"就可以了。 <div> <h3>img引入本地图片</h3> <img src="@/assets/images/demo.jpeg" width="200"> </div> <div> <h.
vue ＜el-image标签无效果,图片不显示，未发起请求Failed to resolve component: el-
JavaBigData的博客
12-12 1347
【代码】vue ＜el-image标签无效果,图片不显示，未发起请求Failed to resolve component: el-
vue加载图片失败解决方法
qq_41395120的博客
05-13 2669
在vue项目中，我们引用图片组件 el-image 绑定路径会提示加载失败，如下图所示 <el-image class="zuipinImg" src="@/assets/photo.png" :preview-src-list="zuopinsrcList"> </el-image> 解决方案 1、使用绝对路径 <el-image :src="'https://fuss10.elemecdn.com/e/5d/4a73
vue图片加载失败时用默认图片替换的方法
10-16
本篇文章将详细介绍如何在Vue中实现图片加载失败时用默认图片进行替换。 首先，我们需要理解这个过程的基本原理。当图片加载失败时，浏览器会触发`error`事件。我们可以利用这个事件，在图片加载失败时，用预设的...
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
在Vue.js中，`el-tab-pane` 是 Element UI 框架中的一个组件，用于创建选项卡式布局。然而，在实际开发过程中，开发者可能会遇到使用 `v-show` 或 `v-if` 控制 `el-tab-pane` 显示与隐藏时不起作用的问题。这通常是...
解决vue中el-tab-pane切换的问题
10-15
在Vue开发过程中，Element UI库提供了丰富的UI组件，其中`el-tabs`组件用于实现标签页切换功能。在本文中，我们将深入探讨如何解决Vue中`el-tab-pane`切换时遇到的问题，以及如何优化和管理组件的渲染。 首先，问题...
Vue动态生成el-checkbox点击无法赋值的解决方法
10-17
主要给大家介绍了关于Vue动态生成el-checkbox点击无法赋值的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue中img src 动态加载本地json的图片路径写法
10-17
主要介绍了vue中的img src 动态加载本地json的图片路径写法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue中v-for加载本地静态图片方法
08-27
Vue 中使用 v-for 加载本地...在 Vue 项目中使用 v-for 加载本地静态图片时，需要使用 require 函数来加载图片路径，以便正确地加载图片。同时，我们也可以将静态图片放在 static 目录下，以避免加载图片时的路径问题。
el-image 标签初始化失败之后 就会失去异步加载功能
疯小子
12-28 1683
element 框架的 el-image组件 在一开始加载失败之后会失去异步加载功能，再次赋值也无法加载。el-image标签采用的是懒加载模式，通过新建一个image对象来监听这个对象的加载事件。解决方法的原理就是通过刷新vue的组件和事件重新初始化el-image对象，初始化时会重新新建image对象，这时就能加载成功了，异步加载功能也会恢复。由于初始化时对象不能正常加载，自然也没有了异步加载的功能。2：使用单独更新页面元素的方式也是有效的。1：更改url完成之后强制更新页面元素。
element el-image标签加载本地图片失败解决方法
qq_38571305的博客
01-16 1万+
图片地址需require引入 <el-image :src="require("@/assets/img/contract/recently_wait-for-me.png")" fit="fill"></el-image>
vue3 element plus 中el-image本地图片加载失败，路径问题
qq_43378240的博客
09-12 1881
src那里要用require包起来，这样就行了。
vue图片加载失败image load failed的解决办法
xiewu1015的博客
01-04 9011
在index.html里面标头默认不使用外部资源，所以在复制cordova中的index.html到vue项目的index.html中，要注意以下代码： &lt;meta http-equiv="Content-Security-Policy" content="* gap://ready file:; style-src 'self' 'unsafe-inline'; img-src 'self...
vue3+element plus+vite 引入本地静态资源图片require报错的原因和解决方案，以及如何在表格中展示图片
m0_52043522的博客
06-02 4349
在写vue 3+element plus+vite 项目的过程中，require引入展示图片出现了报错，记录了一下错误原因和解决方法。
el-image 本地图片不显示
08-30
你好！对于 el-image 组件，本地图片不显示可能有几个原因。请尝试以下步骤来解决问题： 1. 确保图片路径正确：检查图片的路径是否正确，并确保图片文件存在于指定的路径中。你可以使用相对路径或绝对路径来引用图片。 2. 检查图片格式：确认图片格式是否被支持。el-image 支持常见的图片格式，如 JPEG、PNG 等。如果你的图片格式不被支持，可能无法正常显示。 3. 检查图片加载方式：el-image 提供了多种加载图片的方式。你可以尝试设置图片的加载方式来解决问题。例如，可以使用 "fit" 属性来调整图片的大小和位置。 4. 检查是否启用了跨域访问：如果你的图片位于不同的域名下，可能存在跨域访问的问题。你可以在服务器端配置跨域访问控制，或者尝试使用代理将图片请求转发到同一域名下。 5. 检查网络连接：有时候，网络连接不稳定可能导致图片无法加载。请确保你的网络连接正常，并尝试刷新页面或清除浏览器缓存。 如果以上方法都不能解决问题，可以提供更多的信息，例如代码示例或错误提示，以便我能够更好地帮助你解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值