style에 image 바인딩 하는 부분

집에서 할 때에는 문제가 없는데
회사와 같이 방화벽 설치되어서 로컬 사진 파일을 불러오려 할 때 강의내용과 비슷하게 하여도 이미지 로딩이 되지 않는 문제가 있습니다. 
Post.vue는 아래와 같은데요, 

<template>
  <div class="post">
    <div class="post-header">
      <div class="profile" :style="{backgroundImage: DB.userImage}"></div>      
      <span class="profile-name">{{ DB.name }}</span>
    </div>
    
    < img src="./../assets/images/Manual_FL_grad.png" style="width: 50%">
    < img src="@/assets/images/Manual_FL_grad.png" style="width: 50%">
    < img src="src/assets/images/Manual_FL_grad.png" style="width: 50%">
    
    <p>{{ DB.userImage }}</p>

    <div class="post-body" :style="{ backgroundImage: `url(${DB.userImage})` }" ></div>
    <div class="post-content">
      <p>{{ DB.likes }} Likes</p>
      <p>
        {{ DB.name }} {{ DB.content }}
      </p>
      <p class="date">{{ DB.date }}</p>
    </div>
  </div>
</template>

-------------------------------------
    <p>{{ DB.userImage }}</p>
의 경우에는 @/assets/images/Manual_FL_grad.png와 같이 출력됩니다. 

    < img src="./../assets/images/Manual_FL_grad.png" style="width: 50%">
    < img src="@/assets/images/Manual_FL_grad.png" style="width: 50%">
의 경우에는 정상적으로 이미지가 화면에 출력됩니다.
 
    < img src="src/assets/images/Manual_FL_grad.png" style="width: 50%">
    
      <div class="profile" :style="{ backgroundImage: `url(${DB.userImage})`></div>

의 경우에는 이미지파일이 꺠진 아이콘이 나타납니다. 

혹시 원인을 알 수 있을까요?