Salesforce LWC静态资源图片设置宽高后消失如何处理？

图片加宽高后消失的常见原因 #

通常是宽高单位配置错误、父容器无明确宽高时使用百分比单位导致宽高计算为0，或是样式优先级冲突导致宽高被覆盖。

正确设置图片宽高的两种方式 #

方式1：HTML原生属性（简单场景适用） #

直接给img标签添加width、height属性，单位默认是像素，也可手动指定百分比等合法单位：

<!-- 固定像素宽高 -->
<img src={Resource.Img1} width="300" height="200" alt="展示图片">
<!-- 百分比宽高，需父容器有明确宽高配置 -->
<img src={Resource.Img1} width="100%" height="auto" alt="自适应宽度图片">

方式2：CSS类控制（推荐，可维护性更高） #

给img标签添加自定义class，通过CSS控制样式，还可搭配object-fit属性避免图片拉伸变形：

<img src={Resource.Img1} class="custom-display-img" alt="展示图片">

LWC添加CSS样式的方法 #

LWC会自动加载和组件同名的CSS文件，你只需在组件目录下创建和.html、.js同名的.css文件，写入样式即可，无需额外引入。
比如你的组件名为imageDemo，就在imageDemo.css中写入以下内容：

.custom-display-img {
    width: 300px;
    height: 200px;
    /* 控制图片裁剪适配规则，可选值contain/cover/fill等 */
    object-fit: cover;
    /* 可按需添加其他样式 */
    border-radius: 8px;
    margin: 1rem 0;
}

如果需要动态绑定样式，可在JS中定义样式字符串再绑定到HTML的style属性：
JS代码示例：

import { LightningElement } from 'lwc';
import Img1 from '@salesforce/resourceUrl/Img1';

export default class ImageDemo extends LightningElement {
    imgResource = Img1;
    dynamicImgStyle = 'width: 300px; height: 200px; border-radius: 8px;';
}

对应的HTML绑定写法：

<img src={imgResource} style={dynamicImgStyle} alt="动态样式图片">

注意事项 #

• 不要使用ID选择器定义样式，LWC会自动为元素ID添加前缀，会导致样式匹配失败，优先使用class选择器
• LWC样式默认组件隔离，当前组件内定义的样式不会影响其他组件的元素
• 若使用百分比宽高，必须保证父容器有明确的宽高设置，否则百分比宽高会被计算为0，导致图片消失

内容的提问来源于stack exchange，提问作者Hasan Zubairi