Topic: Simple adding of image not working with relative url path
I feel like a real stooge not being able to figure this out, but why does a simple line like the following render a broken image when the path is correct?
<img src="../../img/branding/logo.png" alt="">
I am using the MDB Pro for Angular setup and it is all configured perfectly as far as I can tell.
I am a month into learning Angular, so it could be some kind of Angular configuration, but I am at a loss.
johndev pro commented 7 years ago
Hello Ollie, Thanks for the reply. I'm not sure exactly how to share since I am simply doing the following and have just done it again to be sure I'm not crazy and missed something the last 3 times I tried it. :) 1. Downloaded the "mdb-angular-pro-5.2.3" zip file from my mdbootstrap.com account. 2. Unzip it and open it up in visual studio. 3. Go into the folder in terminal and run "npm install", which completes with no errors. 4. Create the following folder structure and put a valid logo.png file into it "mdb-angular-pro \ src \ app \ assets \img". 5. Open app.component.html and add the following code anywhere. [<img src="./assets/img/logo.png" alt="">] 6. Run ng serve -o from within project folder in terminal. The image shows as a broken question mark icon and when inspected the console log says "Failed to load resource: the server responded with a status of 404 (Not Found)" Here is the versioning information received when running "ng --version" from within the above project folder. Angular CLI: 1.5.0 Node: 9.8.0 OS: darwin x64 Angular: 5.1.3 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router @angular/cli: 1.5.0 @angular-devkit/build-optimizer: 0.0.36 @angular-devkit/core: 0.0.22 @angular-devkit/schematics: 0.0.42 @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.8.0 @schematics/angular: 0.1.11 @schematics/schematics: 0.0.11 typescript: 2.7.2 webpack: 3.10.0 Obviously I'm just running this all in development on my local laptop and with no customization. If you follow the steps above it will hopefully recreate the issue for you. Any help is very appreciated. Thanks again for the response!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No
johndev pro commented 7 years ago
Just in case anyone asks I tried creating an assets folder inside of the src folder and referring to it that way from app.component.html <img src="./assets/images/branding/logo.png" alt="">