Simple adding of image not working with relative url path

Topic: Simple adding of image not working with relative url path

johndev pro asked 6 years ago

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 6 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="">

Add comment

johndev pro answered 6 years ago

0 0 Best answer

Alright, evidently I tried everything except for creating my "assets" folder inside the "src" folder. Once I did that the image showed as expected when the following was added to the app.component.html file. [<img src="../assets/images/branding/logo.png" alt="">] Thanks for suffering through my extremely noob question, but hopefully it will help someone else along the way.

Add comment

Ollie Vincent pro answered 6 years ago

0 0 Best answer

Can you share a link so that we can debug?

johndev pro commented 6 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!

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!

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

johndev

Pro User 10Support score
3Questions 2Answers 0Snippets