###
Vue3 中解决 `img` 的 `src` 更新后组件未重新渲染的问题
在
Vue3 中，如果图片的 `src` 属性动态更新后组件未重新渲染，通常是因为响应式系统未能正确检测到数据的变化。以下是几种解决方案：
#### 1
. 确保数据是响应式的
在
Vue3 中，确保 `homeBgImg` 是通过 `reactive` 或 `ref` 定义的响应式数据。如果使用了普通对象或数组，可能会导致
Vue 无法检测到变化[^2]。例如：
```
javascript
import { reactive } from '
vue';
export default {
setup
() {
const homeBgImg = reactive
([]
);
const handlet =
() => {
axios
.get
(getApiUrl
("jiekou"
)).then
(res => {
homeBgImg
.splice
(0, homeBgImg
.length,
...res
.data
.data
.list
); // 使用 splice 方法更新数组
}
).catch
(error => {
error_msg
(error
);
}
);
};
return { homeBgImg, handlet };
}
};
```
#### 2
. 强制更新组件
如果图片的 `src` 更新后仍然未重新渲染，可以通过为 `<img>` 标签添加 `key` 属性来强制组件重新渲染。每次 `src` 发生变化时，更新 `key` 的值即可[^3]。例如：
```html
<
VueSlickCarousel v
-bind="settings1">
<div v
-for="
(item, index
) in homeBgImg" :key="`${item
.pic}
-${index}`" v
-cloak>
<img :src="item
.pic" :alt="item
.topText" />
</div>
</
VueSlickCarousel>
```
#### 3
. 检查异步加载逻辑
如果图片的 `src` 是通过异步操作（如 API 请求）更新的，确保在数据更新后通知
Vue 重新渲染。可以使用 `$nextTick` 来确保 DOM 已经更新[^4]。例如：
```
javascript
axios
.get
(getApiUrl
("jiekou"
)).then
(res => {
this
.homeBgImg = res
.data
.data
.list;
this
.$nextTick
(() => {
console
.log
('Images updated:', this
.homeBgImg
);
}
);
}
).catch
(error => {
error_msg
(error
);
}
);
```
#### 4
. 避免直接修改不可响应的数据
在
Vue3 中，直接修改非响应式对象的属性可能导致组件无法重新渲染。如果需要动态添加属性，建议使用 `Proxy` 或 `Object
.assign` 来确保数据的响应性[^5]。例如：
```
javascript
const newItem = { pic: 'new
-image
.jpg', topText: 'New Image' };
Object
.assign
(this
.homeBgImg[0], newItem
); // 确保属性更新被检测到
```
#### 5
. 使用虚拟
列表优化性能
对于包含大量图片的轮播图组件，可以考虑使用虚拟
列表技术来优化性能。通过只渲染可见区域的内容，减少 DOM 节点的数量，从而提升渲染效率[^3]。例如：
```html
<virtual
-scroller class="scroller" :items="largeDataList" :item
-height="50" v
-slot="{ item }">
<div class="list
-item">
<img :src="item
.avatar" />
<span>{{ item
.name }}</span>
</div>
</virtual
-scroller>
```
---
### 注意事项
- 如果问题依然存在，检查是否由于第三方组件（如 `
VueSlickCarousel`）的限制导致。某些组件可能需要额外的配置才能正确处理动态内容。
- 确保图片路径正确且服务器支持跨域访问。如果图片加载失败，可能是由于路径错误或 CORS 限制引起的。
---
文章讲述了如何使用VueSlickCarousel库来实现在图片列表横向滚动时隐藏原滚动条，通过箭头控制滚动，并展示了详细的配置代码和CSS样式调整。
最低0.47元/天 解锁文章
扫一扫
1029
到【灌水乐园】发言
