前端 - vue2图片加载显示不全是怎么回事？

Question

动态获取assets路径下的图片出现显示一半的情况，有时候会出现这种情况

<div class="ele-notice-item-icon"
                   :style="`background: url(${getMsgImg(item.msgClass)}) no-repeat 100% 100%;`"></div>

 getMsgImg(type) {
      return require('@/assets/img/common/msg/' + type + '.png');
    },

Answer 1

设置background-size即可,(设置下background-repeat更佳)

.ele-notice-item-icon{
   background-size: contain;
   background-repeat: no-repeat;
}

Answer 2

在 Vue 2 中，当你使用 require 函数来动态加载图片时，通常这种方式是用于 webpack 打包时的静态资源引用。然而，直接在模板或计算属性中使用 require 函数可能会遇到一些问题，特别是当资源路径是动态生成的时候。这是因为 webpack 在编译时需要确定所有的依赖，而动态路径可能会导致 webpack 无法正确解析这些依赖。

对于你遇到的问题，图片加载显示不全，可能的原因包括：

1. 图片加载时机问题：当图片路径是动态生成时，Vue 可能在 DOM 更新之前或之后尝试加载图片，导致图片尺寸不正确或未完全加载就被渲染。
2. CSS 背景样式问题：在你的样式中使用了 background: url(...) no-repeat 100% 100%;，这里的 100% 100% 指的是背景图片被拉伸至元素的大小。如果图片本身的宽高比与元素不匹配，图片可能会被拉伸变形。此外，如果图片加载较慢，初始时可能只显示了图片的一部分。

解决方案

方案一：使用 Vue 的异步组件或方法来处理图片加载

你可以尝试使用 Vue 的生命周期钩子或异步方法来确保图片完全加载后再设置样式。但是，对于背景图片来说，这种方法可能不太直接。

方案二：预加载图片

在组件的 mounted 钩子中预加载图片，确保图片在 DOM 更新前已经加载完成。

方案三：调整 CSS 背景样式

• 使用 background-size: cover; 而不是 100% 100%，这样图片会覆盖整个元素区域，但会保持其宽高比，可能部分区域会不可见（被裁剪）。
• 或者，你可以使用 background-size: contain; 来确保图片完全可见，但可能不会覆盖整个元素区域。

方案四：改用其他方式引用图片

如果你确实需要在模板中动态地引用图片，并且希望 webpack 能够处理这些动态引用，你可能需要考虑使用 require.context 或其他 webpack 插件来生成动态模块依赖。但是，这种方法比较复杂，通常用于需要动态加载大量相似资源（如图片、字体等）的场景。

方案五：直接绑定 src 属性（如果适用）

如果可能的话，考虑将背景图片改为 <img> 标签的 src 属性，这样可以更直接地控制图片的加载和显示。

示例：调整 CSS 样式

<div class="ele-notice-item-icon"
     :style="`background: url(${getMsgImg(item.msgClass)}) no-repeat; background-size: cover;`"></div>

使用 background-size: cover; 来确保图片覆盖整个元素，但请注意，这可能会裁剪图片的某些部分以适应元素大小。