img图片路径错误时,显示破图/图片裂开,如何处理?

img图片路径错误时,显示破图/图片裂开,如何处理?

首先我们可以设置img的alt属性,当图片显示不出来的时候就会显示对应的文字,但是此时还会出现一张图片破裂,很不美观。
如下:
在这里插入图片描述

一、第一种方式:
1.设置css样式

img[src=''],
  img:not([src]) {
    opacity: 0;
  }

2.路径出错时,把路径置空
js写法:

<img :src="scope.row.logoUrl" alt="logo" onError={{  this.src = ''}} />

ts写法:

<img src={scope.row.logoUrl} alt="logo" onError={() => { scope.row.logoUrl = ''; } />

第二种方式:
给图片增加css,遮挡在原来的地方上面进行隐藏(不推荐,个人推荐方式一)
在这里插入图片描述

还有更好的方法,欢迎大家留言区交流哦~~

在你的代码中,使用原生的 `<img>` 标签加载图片出现“裂开”的标和图片名称,通常是因为以下几个原因: 1. **路径问题**:图片路径不正确或文件不存在。 2. **资源未加载**:服务器没有正确配置,导致静态资源无法访问。 3. **权限问题**:浏览器或服务器对图片文件的访问权限设置不当。 ### 解决方法 1. **检查图片路径**: - 确保 `src` 属性中的路径是正确的。例如,如果你的项目结构如下: ``` /src ├── assets │ └── logo.png └── components └── YourComponent.vue ``` 那么你应该使用相对路径: ```html <img src="./assets/logo.png" alt="Logo"> ``` 2. **检查 Webpack 配置**: - 如果你使用的是 Vue CLI 或其他构建工具,确保 Webpack 配置正确处理了静态资源。通常情况下,Vue CLI 会自动处理这些路径,但你可以检查 `vue.config.js` 文件中的配置: ```javascript module.exports = { publicPath: '/', outputDir: 'dist', assetsDir: 'assets', lintOnSave: process.env.NODE_ENV !== 'production' }; ``` 3. **检查服务器配置**: - 确保你的开发服务器(如 `npm run serve`)或生产环境服务器正确地服务静态资源。例如,在 Vite 中,你可以检查 `vite.config.js` 文件: ```javascript export default defineConfig({ base: './', server: { open: true, port: 3000 } }); ``` 4. **检查控制台错误**: - 打开浏览器的开发者工具(通常按 F12),查看控制台是否有任何关于图片加载错误信息。这可以帮助你确定问题的具体原因。 ### 示例 假设你的项目结构如下: ``` /src ├── assets │ └── logo.png └── components └── Login.vue ``` 在 `Login.vue` 中使用以下代码: ```html <template> <div class="login-container"> <img src="./assets/logo.png" alt="Logo"> <!-- 其他表单元素 --> </div> </template> <script> // 其他脚本代码 </script> <style scoped> /* 样式代码 */ </style> ``` 通过以上步骤,你应该能够解决图片显示的问题。如果问题仍然存在,请提供更多详细信息以便进一步诊断。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值