vue项目出现替换图片出现404的错误

最新推荐文章于 2023-04-19 11:38:23 发布
最新推荐文章于 2023-04-19 11:38:23 发布
阅读量987 收藏 1
点赞数
分类专栏： vue 的学习 文章标签： base64 图片替换报错的问题 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hailangtuteng/article/details/95334154
版权

最近接手了一个项目需要替换logo图标、UI设计好新的图片放进项目中出现localhost:999/images/login-logo.png找不到的错误

通过各种写法 require 、 important 发现都没有用结果打印图片发现是一串地址、打印以前的图片是base64位编码

结果通过看base64位相关文章和看代码发现对图片的大小做了限制 不能比以前的图片尺寸大太多 否则会出现找不到图片的错误

然后让UI重新设计logo图片 导出最小的尺寸 最后成功替换

 

树沙&
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue+webpack项目接口跨域出现的问题
10-14
此外，当Vue项目打包后，可能会遇到404错误，这通常是由于静态资源路径问题引起的。在Vue 2.x中，可以通过修改`build`目录下的`webpack.base.conf.js`或`webpack.dev.conf.js`配置文件中的`assetsPublicPath`。在...
vue问题记录svg-icon报错，iconclass
Y4258的博客
06-17 2694
svg-icon在vue项目中的使用
vue使用svg的问题
wallowyou的博客
02-15 2781
vue使用svg 做的一个可视化大屏项目中需要引入svg, 直接绑定svg元素的某些值，在ui给的svg中出现了style标签用作svg的样式,然后就会报错。结果查阅资料知道了两个解决方法. 方法1： 将svg中的style标签修改为<svg:style></svg:style>。实例如下： <svg xmlns="http://www.w3.org/2000/s...
uni-app image标签 404错误之后替换为默认图片
weixin_38946164的博客
09-28 2379
<template> <view v-for="(item, index) in Items" :key="index"> <image :src="item.img" mode="aspectFill" @error="error(index)"></image> </view> </template> <script> export default
小程序加载网络图片404错误，使用默认图片替换
weixin_38946164的博客
12-23 891
Vue2，后端返回的图片404时，前端如何用本地图片代替
ANTINODE的博客
04-14 502
本文讲解了在后端返回的图片在404的情况下，前端如何用本地图片代替的方法
Vue项目部署Nginx配置文件 SSL
08-11
当你的 Vue 项目完成开发并经过 `npm run build` 编译后，生成的静态资源需要部署到服务器上供用户访问。Nginx 是一款高性能的 HTTP 和反向代理服务器，常被用来部署 web 应用，包括 Vue 项目。SSL（Secure Sockets ...
Vue项目中跨域问题解决方案
08-27
在开发Vue项目时，我们经常会遇到跨域问题，这主要是由于浏览器的安全策略限制了不同源之间的请求。跨域问题可以通过多种方式解决，本文主要讲解在使用vue-cli搭建的项目中，如何通过更改Header和使用...
Vue 图片压缩并上传至服务器功能
10-15
本篇内容将详细介绍如何在Vue项目中实现这一功能，结合Vant UI库，提供一个实用的图片选择、压缩和上传的解决方案。 首先，我们需要创建一个工具类`CompressImageUtils`，用于处理图片的压缩和转换。在JavaScript中...
Vue中图片Src使用变量的方法
10-16
在Vue项目中，动态设置图片`src`通常涉及到路径问题，特别是当项目进行打包时。使用网络资源、`import`或`require`都是有效的解决方案。选择哪种方法取决于图片资源的存储位置和项目配置。理解这些方法的原理和适用...
小程序图片404错误，使用默认图片替换
banxia2152的博客
10-12 465
image的属性 微信小程序图片加载失败显示默认图片，通常情况下： wxml <image class="userinfo-avatar" src="{{avatar}}" binderror="errorFunction"></image> js errorFunction: function(){ this.se...
vue动态加载图片地址时报错404的解决方案
weixin_57209852的博客
08-26 4548
vue中动态绑定图片报错404问题
vue 动态显示图片报错 404
liuxi_happy的博客
11-17 5095
<img :src="image"> 当我们动态加载图片的时候会出现如下图错误 1.第一种可能，是你写了相对路径引起的，你需要写绝对路径 image:'../../assets/image/top10-1.png' 你需要改成具体路径 image:'/src/assets/images/top10-1.png' 2.第二种解决方式你要使用require() <img :src="require(images)"> 3.第三种解决方式把图片放在public目录下面，但是这样虽然
vue加载图片出现404用默认图片替换的方法
m0_37780367的博客
11-19 1332
根据不同类型图片加载时，根据后台返回的路径灌入src中后，src不为空，但是找不到对应路径的图片时会有叉号显示，展示不友好，需要用默认图片对应展示。 此时需要走onerror方法指定默认src路径 <img :src="node.data.imglogo|showLogo" v-if="node.data.imglogo" style="height:15px;" onerror="this...
vue中img标签404错误处理事件onerror
m0_62823653的博客
05-29 8190
第一部分：vue中img标签onerror事件 第一种方法：使用@error方法能处理onerror事件（据说会导致回闪，目前没遇到） <img :src="xxx图片资源" @error="fn"> //当图片资源加载报错404时会被调用 fn(e) { //substitute为导入进来的图片 e.target.src = this.substitute }, //若是真的遇到了回闪 @error=>:onerror <img :src="xxx图片资源" :o
vue项目图片加载404（not found）问题，如何解决
你好！我是派大星，一个热爱分享的个人博客作者。我的博客致力于分享关于前端开发的知识、见解和经验。通过我的文章，实用技巧和个人心得。无论是解决问题、获取新知识，还是激发创造力和热情，我的目标是为读者提供有价值的内容和启发思考的观点。
04-19 3047
vue路径报404，解决方式
Vue项目中直接引入图片报错（404 Not Found）
weixin_71962268的博客
10-22 2675
在view项目中引入图片，无法在网页上显示控制台报告404 not found的错误时的三种解决方法。 方法一：在src的static文件夹中，把需要用到的音频或图片放里面 更改路径 刷新 视频和图片正常显示和播放。 方法二：在src的assets文件夹中，把需要用到的音频或图片放里面 更改路径 突然报错了 这里报错的原因是使用了相对路径 修改路径就可以了 方法三：图片在/public目录下，把图片或音频放到与index.ht
Vue项目中直接引入图片 报错（404 not found）
热门推荐
weixin_44588262的博客
12-02 1万+
问题：在vue 项目中，引入的图片无法在网页显示 控制台报错：图片地址 404 not found 解决方案： 把图片放在 static 文件夹，不要放在 assets 文件夹 index.html 代码： <img src="./src/assets/img/logo.png" > 解决方案： 1. 把图片放在 static 文件夹，不要放在 assets 文件夹 我在 static 新建一个img 文件夹，并把 assets 文件夹中的图片搬了过去 2. 重新填写图片路径 <i
使用字蛛压缩字体后在vue组件中使用无效，在控制台发现转换为base64文件了，而且还是 0kb显示，跪求大神破解
wejh233333的博客
03-21 1289
使用字蛛压缩字体后在vue组件中使用无效，在控制台发现转换为base64文件了，而且还是 0kb显示，跪求大神破解 在vue组件样式中引用压缩后的字体，发现没有效果，在netWork中看到字体被转为base64格式了，直接引用没有被压缩的是可以使用的，但是字体文件太大了，不在vue组件中，另创一个html文件使用压缩字体是没有问题的。 下面这张是在vue组件中的字体加载： 这张是直接在html中...
vue 图片404 替换默认图
最新发布
09-06
在Vue中，可以使用`v-bind`指令来绑定图片的属性值。如果图片无法加载（即返回404错误），可以通过在`<img>`标签中添加`v-on:error`事件来处理。 首先，你需要在data中定义一个默认图片的路径，用于替换无法加载的图片。例如：`defaultImage: '默认图片路径'`。 然后，在模板中，使用`v-bind:src`指令将图片的路径绑定到一个data中的变量上，同时在`<img>`标签上添加`v-on:error`事件监听。 示例代码如下： ```html <template> <div> <img v-bind:src="imagePath" v-on:error="handleImageError" alt="图片"> </div> </template> <script> export default { data() { return { imagePath: '图片路径', defaultImage: '默认图片路径' } }, methods: { handleImageError() { this.imagePath = this.defaultImage; } } } </script> ``` 在上述示例中，当`<img>`标签中的`src`属性所指定的图片无法加载时，会触发`handleImageError`方法。该方法会将`imagePath`变量更新为`defaultImage`，从而显示默认图片。 这样，在图片加载出错的情况下，就能够替换为默认图片。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值