Question

我正在尝试在类似于Google Plus / Gmail的React JS前端中实现个人资料图片选项。如果没有可用的个人资料图片，则会提取和显示名称中单词的第一个字母，而不是个人资料图片。

我已经制作了适当的div和用于显示的CSS，并且首字母也被提取，但是没有显示。 This image is a good example.

HTML：

<li className="nav-item">

                   <div id="container_acronym">
                     <div id="name_acronym">                        
                        {this.acronym_name(this.state.lead_details.customer_name)}
                     </div>
                    </div>                 
            </li>

CSS：

    #container_acronym {
    width: 90px;
    height: 90px;
    border-radius: 100px;
    background: #333;
  }
  #name_acronym {
    width: 100%;
    text-align: center;
    color: white;
    font-size: 36px;
    line-height: 100px;
  }

JavaScript的：

acronym_name(str){
    var regular_ex=/\b(\w)/g;
    var matches = str.match(regular_ex);
    var acronym = matches.join('');
    document.getElementById("name_acronym").innerHTML = acronym;
}

Answer 1

您需要从acronym_name(str)函数返回名称，而不是设置innerHTML，例如：

...
acronym_name(str){
    var regular_ex=/\b(\w)/g;
    var matches = str.match(regular_ex);
    var acronym = matches.join('');
    //return the acronym
    return acronym;
}

显示名称首字母而不是个人资料图片

1 个答案: