I am using Angular 5 in an attempt to display an image that I have sat in a file 2 directories up from where I have the HTML, however I simply get the blank image box and an error in the console of:
GET http://localhost:4200/logo.jpg 404 (Not Found)
I am attempting to output via the code:
<img src="../../logo.jpg">
I have tested by placing a placeholder.it image within the src which worked perfectly... For some reason this will not?
If you are using #angular/cli you'd need to place your images under /src/assets/ in line with the .angular-cli.json asset configuration. You can then just use the image directly such as:
<img src="assets/pa-logo.jpg">
You can create additional folders under "assets" property in .angular-cli.json for additional control/organization as necessary:
"assets": [
"assets",
"foobar",
"favicon.ico"
],
Usage after you placed pa-logo.jpg in the this hypothetical foobar folder:
<img src="foobar/pa-logo.jpg">
Hopefully that helps!
Related
I am using myst-parser and autoapi to generate the html page for my src folder. Everything is working fine, except I can't seem to find an option to change the labels on the left menu other than changing the html files manually.
I wonder if there is any option to write on the conf.py or index.md to set a different name for the documentation of my src folder.
As per image bellow, I just would like to change the name API Reference to something else.
This is how my conf.py file looks like
extensions = [
"myst_parser",
"autoapi.extension",
"sphinx.ext.napoleon",
"sphinx.ext.viewcode",
]
autoapi_dirs = ["../src"]
exclude_patterns = ['_build', 'Thumbs.db', '.DS_Store']
html_theme = 'sphinx_rtd_theme'
and this is how my index.md looks like:
{include} ../README.md
{toctree}
:maxdepth: 1
:hidden:
autoapi/index
I followed this StackBlitz example: https://stackblitz.com/edit/ngx-smart-modal-example to add the ngx-smart-modal window, but the component opens on the page instead of in a modal pop-up. Can anyone tell me how to solve this problem, or how to add the css file reference if that's what solves the problem?
I tied many things,
I tried following the first 2 answers of this post: ngx-smart-modal - Angular 6
but with no luck:
I tried adding the line:
"node_modules/ngx-smart-modal/ngx-smart-modal.css",
to the section:
"styles": [
],
in the angular.json
I tried adding the line:
#import "../node_modules/ngx-smart-modal/ngx-smart-modal.css";
into the src/styles.css file as well as adding: the line:
"src/styles.css"
to the section
"styles": [
],
in the angular.json
...
"styles": [
"./node_modules/ngx-smart-modal/ngx-smart-modal.css"
],
...
Your stackblitz example use ngx-smart-modal#2.0.4, however we are currently in #7.1.1.
I recommand you to follow the official documentation for Setup your modals.
Instead of absolute path, use relativ path as #import "~ngx-smart-modal/ngx-smart-modal.css";
I followed some steps but with no luck, so I moved to another example that did work: https://www.youtube.com/watch?v=Jm9q9Alva0M with code at: https://stackblitz.com/edit/ngx-modal
but I had to add the line:
< link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" >
at the top of the "app.component.html" file, then the modal page showed up.
I have this element in my index.cshtml page:
<section class="parallax parallax-2 padding-xxs" style="background-image: url('mySiteName/assets/images/shutterstoc/img1.jpg');">
<div>some content </div>
</section>
As you can see I have style attribute.
If I change style attribute to this:
style="background-image: url('~/assets/images/shutterstoc/img1.jpg');"
The background image is disappear and I get this error in web console:
Failed to load resource: the server responded with a status of 404 (Not Found) img1.jpg
**Update*
The path to the image is:
http://localhost/assets/images/shutterstoc/img1.jpg
As you can see the mySiteName is missing.
Update2:
I try this path:
<section class="parallax parallax-2 padding-xxs" style="background-image: url('./assets/images/img1.jpg')">
But still I get error above.
Why do I get error Failed to load resource and how to fix it?
The tilda sign ~ can be used in razor views to get the app root path. It will not work for css style sheet files.
When razor executes the view, if it finds the ~ , it will be converted to the app root base path.
Just use the path without the ~
background-image: url('./assets/images/shutterstoc/img1.jpg');
The image url is relative the stylesheet. So adjust the prefix . to ../ as needed depending on your location of the style sheet and the assets directory.
.someCssClass {
background-image: url('./assets/images/shutterstoc/img1.jpg');
}
Like i mentioned above, the image location is relative to the the location of the style sheet . If you hard code the style in the view/page, it will be relative to the page's url. So while the request yourSiteBaseUrl/ works , neither yourSiteBaseUrl/Home/ or yourSiteBaseUrl/Home/Index won't work, even though those 2 routes return the same action method and view/page. So i recommend not doing that.
Move the definition to the css file and use the correct relative path there tot he image location. It will then work for yourSiteBaseUrl/Home/Index and yourSiteBaseUrl/Home and yourSiteBaseUrl
I'm pretty new to Angular so I'm not sure the best practice to do this.
I used angular-cli and ng new some-project to generate a new app.
In it created an "images" folder in the "assets" folder, so now my images folder is src/assets/images
In app.component.html (which is the root of my application), I put
<img class="img-responsive" src="assets/images/myimage.png">
When I do ng serve to view my web application, the image does not display.
What is the best practice to load up images in an Angular application?
EDIT: See answer below. My actual image name was using spaces, which Angular did not like. When I removed the spaces in the file name, the image displayed correctly.
In my project I am using the following syntax in my app.component.html:
<img src="/assets/img/1.jpg" alt="image">
or
<img src='http://mruanova.com/img/1.jpg' alt='image'>
use [src] as a template expression when you are binding a property using interpolation:
<img [src]="imagePath" />
is the same as:
<img src={{imagePath}} />
Source: how to bind img src in angular 2 in ngFor?
I fixed it. My actual image file name had spaces in it, and for whatever reason Angular did not like that. When I removed the spaces from my file name, assets/images/myimage.png worked.
Angular-cli includes the assets folder in the build options by default. I got this issue when the name of my images had spaces or dashes.
For example :
'my-image-name.png' should be 'myImageName.png'
'my image name.png' should be 'myImageName.png'
If you put the image in the assets/img folder, then this line of code should work in your templates :
<img alt="My image name" src="./assets/img/myImageName.png">
If the issue persist just check if your Angular-cli config file and be sure that your assets folder is added in the build options.
Being specific to Angular2 to 5, we can bind image path using property binding as below. Image path is enclosed by the single quotation marks.
Sample example
<img [src]="'assets/img/klogo.png'" alt="image">
Normally "app" is the root of your application -- have you tried app/path/to/assets/img.png?
1 . Add this line on top in component.
declare var require: any
2 . add this line in your component class.
imgname= require("../images/imgname.png");
add this 'imgname' in img src tag on html page.
<img src={{imgname}} alt="">
You can follow the below steps in Angular 8+
Step 1: load the image as below in component
const logo = require('../assets/logo.svg').default as string;
#Component({
selector: 'app-show-image',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class ShowImageComponent implements OnInit {
logo = logo;
constructor() { }
ngOnInit() { }
}
step 2: Add the logic in html file
<img [src]="logo" [alt]="'logo'">
If launched without further configuration, you will see a strange error:
ERROR in src/app/app.component.ts(4,14): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i #types/node` and then add `node` to the types field in your tsconfig.
Do as suggested – add the #types/node typings to your project by running npm install #types/node and edit tsconfig.app.json to set:
"compilerOptions": {
"types": ["node"],
...
}
For more info
resource
It is always dependent on where is your html file that refers to the path of the static resource (in this case the image).
Example A:
src
|__assests
|__images
|__myimage.png
|__yourmodule
|__yourpage.html
As you can see, yourpage.html is one folder away from the root (src folder), for this reason it needs one amount of ../ to go back to the root then you can walk to the image from root:
<img class="img-responsive" src="../assests/images/myimage.png">
Example B:
src
|__assests
|__images
|__myimage.png
|__yourmodule
|__yoursubmodule
|__yourpage.html
Here you have to go u in the tree by 2 folders:
<img class="img-responsive" src="../../assests/images/myimage.png">
for me "I" was capital in "Images". which also angular-cli didn't like. so it is also case sensitive.
Some web servers like IIS don't have problem with that, if angular application is hosted in IIS, case sensitive is not a problem.
Try not give space while loading the images.
Instead of
<img src='assets/img/myimage.png' alt="">
try with string interpolation or Property Binding to load the source image as best practice.
I can refrence a pic like this
But i dont want to save user data images in the website path,so i try to locate test.jpg in
/home/www/userdata/username/test.jpg
but just cant ref it's abs path ,when showing on html the pic not displayed,it's like this:
<img src="/home/www/userdata/username/test.jpg"/>
i muset point out that ,i dont want store user datas inside webroot,neither want i store it in database.
In this case,webroot and userdata are at same dir : /home/www/(www serves as an username)
Do i need wirte and image server so i can ref image by http?
Any suggest is appretiated~
where is your HTML Page is located ?
If located in www then you can use like following :
<img src="userdata/username/test.jpg"/>
Otherwise remove "/" before home:
<img src="home/www/userdata/username/test.jpg"/>