title: Angular - Dynamically loading an image
body: <h2>I've searched all over StackOverflow but I haven't been able to find a solution to my problem.</h2>
  
  <hr>
  
  <h2><strong>F.Y.I I'm using ASP.net Core 2.0's default angular project</strong></h2>
  
  <p>I'm currently building an Angular application where I'm trying to load in a customer's logo based on a config found elsewhere.</p>
  
  <p>I'm trying to load this file into my home.component.html</p>
  
  <p>I created a "CustomerService" which has a function getLogo() which in itself returns the customer's logo's path.</p>
  
  <p>My folder structure is as follows:
  <a href="https://i.stack.imgur.com/UAdmP.png" rel="nofollow noreferrer">FOLDER STRUCTURE IMAGE</a>
  <br>The <strong>assets</strong> folder holds the images, and the HTML found below is found in <strong>home.component.html</strong></p>
  
  <p>I know that <strong>"../../"</strong> isn't the way to go, so my first question is how I'd be able to fix that.</p>
  
  <p>I've created the following HTML structure:</p>
  
  <pre><code>&lt;img src="../../assets/timeblockr-logo.png" /&gt;
  &lt;img [src]="customerservice.getLogo()" /&gt;
  </code></pre>
  
  <p>And the CustomerService's getLogo function returns the following:</p>
  
  <pre><code>getLogo() {
      return "../../assets/timeblockr-logo.png";
  }
  </code></pre>
  
  <hr>
  
  <h2>** EDIT: FOUND THE SOLUTION!!! **</h2>
  
  <p>Turns out I had to use:</p>
  
  <pre><code>getLogo(): string{
      return require("../assets/timeblockr-logo.png");
  }
  </code></pre>
  
  <p><strong>Special thanks to @Niladri for the solution to this issue!</strong></p>