html flex 图片不显示

Question

问题遇到的现象和发生背景

请问为什么

里面的img 不显示，尝试过把图片调小 好像也不是尺寸的问题。下面有另外一个图片，是可以显示的，放在

就不行了，是flex的原因吗？还是因为他旁边的div？

问题相关代码，请勿粘贴截图

整个项目在这 是这个代码
https://gitee.com/starplatinum111/git-cache-vue3/blob/master/src/views/zhihu/index.vue

<div class="content">
            <h2>题目</h2>
            <div class="row">
                <!--          为什么这个不显示-->
                <!--          flex row 里的图片不显示-->
                <img class="avatar-img" src="@/assets/miku.jpg" alt="miku"/>
           
                <div class="nickname">昵称</div>
            </div>
            <img class="avatar-img" src="@/assets/miku.jpg" alt="miku"/>


            <div>内容</div>
            <div>浏览</div>

        </div>

css

 @avatar_size: 24px;
    @avatar_img_size: 20px;
    /*不是尺寸的原因*/
    .avatar {
        background: yellow;
        // width: 30px;
        // height: 30px;
        width: @avatar_size;
        height: @avatar_size;
        border-radius: 50%;
    }

    @screen_width: 414px;
    .nickname {
        background: purple;
        //  width: 300px;
        //  width: 183*2px;
        //  height: 22*2px;
        width: 183px;
        height: 22px;
        margin-left: 30px;
    }

    .screen {
        background: green;
        width: @screen_width;
    }

    .content {
        // padding-left: 10px;
        padding-left: 30px;
        padding-right: 10px;
    }

    .avatar-img {
        margin-left: 30px;
        width: @avatar_img_size;
        height: @avatar_img_size;
    }

运行结果及报错内容

可以看到这块是有个东西的 但是没有显示

下面这张图就可以显示

Answer 1

有头绪了 貌似是这里有padding

但是为什么 是flex 自动加的吗

/*有头绪了 貌似是这里有padding*/
    .row {
        background: red;
        display: flex;
        flex-direction: row;
        /* flex-direction: row; */
    }