解决在vue中img标签不显示图片的问题

文章讲述了在Vue项目中遇到的img标签不显示问题,主要介绍了三种解决方案:1.将图片放在static文件夹下;2.使用CDN并存储网络地址;3.放入assets文件夹并通过require导入。重点讲解了require在webpack打包中的作用和图片路径调整的必要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在vue中, 经常会遇到img标签不展示的问题, 本人遇到两种, 都是因为webpack打包, 导致找不到路径, 所以不现实,
总结几个可以解决本地图片路径显示不出来的问题:
1.把图片放在src同级的static文件夹下。
2.把图片放在cdn上,把网络地址存在imgUrl里,然后直接去展示。
3.图片放在assets文件夹,然后在data里面require进图片

下面是一些代码编写方式

情形一: 在template中,

<img :src='imgSrc'>,

<script>

export default {

	data(){
	
		imgSrc: require('本地图片路径')
	
	}

}

</script>

require是导入本地图片的一种方法, webpack打包也能找到正确图片路径

情形二:在template中

<div v-html='imgSrc'></div>

<script>

export default {

	data(){
	
		imgSrc: '<img src="图片放在public或者static下的路径">'
	
	}

}

</script>

因为webpack打包后, 图片的路径已经改变, 正常src下面的图片都无法展示, 所以可以将图片放进public或者static下, 项目运行起来就可以展示, 如果是开发环境正常是放在public文件夹下

### Vue 中 `img` 标签图片加载失败解决方案 #### 将静态资源放置于公共目录 如果遇到位于 `assets` 文件夹中的图片无法通过动态路径获取并显示问题,一种有效的解决办法是将这些图片移至项目的 `public` 文件夹下。这样做能够确保图片可以通过相对路径被正确访问[^1]。 ```html <img src="/images/example.png" alt="Example"> ``` #### 使用内联 `onerror` 属性自动切换备用图像 为了提升用户体验,在图片未能成功加载的情况下提供替代方案是非常重要的。利用 HTML 的 `onerror` 事件可以直接在模板中指定当原图加载失败时应展示的备选图片地址[^2]: ```html <template> <div class="image-container"> <img :src="imageSrc" alt="Default Image" onerror="this.onerror=null; this.src='fallback-image.jpg'"/> </div> </template> <script> export default { data() { return { imageSrc: 'path/to/image' } } } </script> ``` 此方法简单易行,并能有效防止因单张图片加载失败而影响整个页面布局的效果。 #### 利用 CSS 后退机制设置默认背景图 对于某些特定场景下的头像或其他小型图标类别的图片,还可以考虑采用纯CSS的方式来实现加载失败后的视觉补偿效果。这种方式需要修改原有HTML结构,仅需调整样式表即可完成配置[^5]: ```css .avatar { width: 40px; height: 40px; position: relative; } .avatar::after { content: ""; display: block; position: absolute; z-index: 2; top: 0; left: 0; width: inherit; height: inherit; background-image: url("../assets/img/default-avatar.png"); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: all ease-in-out .3s; } /* 当父元素内的实际内容为空白或加载失败时 */ .avatar img[src=""], .avatar img:not([src]):not(img), .avatar img[alt], .avatar img:-webkit-broken, .avatar img:broken { visibility: hidden !important; } .avatar img + ::after { opacity: 1; } ``` 上述代码片段展示了如何借助伪元素 `.avatar::after` 来作为后备选项,一旦检测到目标 `<img>` 元素处于未定义状态或是加载过程中出现问题,则立即启用预设好的背景图案代替之。 #### 动态重试加载策略 考虑到网络状况佳可能导致部分图片初次请求失败的情形,可以在应用层面加入一定的容错逻辑——即针对那些首次尝试下载却遭遇异常情况的对象实施有限次数范围内的重复拉取操作。这仅有助于提高最终呈现质量,同时也增强了系统的鲁棒性和适应能力[^3]。 ```javascript // 假定存在一个名为 retryLoadImage 的辅助函数用于执行具体的再试行为... function retryLoadImage(element, maxRetries = 3) { let retries = 0; function attemptToReload() { element.onload = null; element.onerror = null; if (retries++ >= maxRetries || document.hidden === true) { console.warn(`Failed to load ${element.currentSrc} after ${maxRetries} attempts.`); // 可在此处设定 fallback 行为,比如更换成占位符图形链接等。 return; } setTimeout(() => { try { const newImg = new Image(); Object.assign(newImg, {...element}); newImg.onload = () => { element.src = newImg.src; }; newImg.onerror = attemptToReload.bind(null); newImg.src = element.src; } catch (_) {} }, Math.pow(2, retries)*1e3); // 实施指数级等待间隔以减少服务器压力 } element.onerror = attemptToReload; } ``` 该 JavaScript 函数实现了对给定 DOM 节点对象(此处特指 `<img>` 类型)的一系列异步轮询式刷新动作;每当发生一次加载错误便启动新一轮计时器延迟后再次发起 HTTP 请求直至达到预定的最大重试上限为止。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值