I am trying to put the relative path to one of my images in my assets folder in an image src tag in my Angular2 app. I set a variable in my component to 'fullImagePath' and used that in my template. I have tried many different possible paths, but just cannot seem to get my image up. Is there some special path in Angular2 that is always relative to a static folder like in Django ?
Component
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-hero',
templateUrl: './hero.component.html',
styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
fullImagePath: string;
constructor() {
this.fullImagePath = '../../assets/images/therealdealportfoliohero.jpg'
}
ngOnInit() {
}
}
I also put the picture into the same folder as this component, so since the template, and css in the same folder is working I'm not sure why a similar relative path to the image is not working. This is the same component with the image in the same folder.
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-hero',
templateUrl: './hero.component.html',
styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
fullImagePath: string;
constructor() {
this.fullImagePath = './therealdealportfoliohero.jpg'
}
ngOnInit() {
}
}
html
<div class="row">
<div class="col-xs-12">
<img [src]="fullImagePath">
</div>
</div>
app tree * I left out the node modules folder to save space
├── README.md
├── angular-cli.json
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ ├── hero
│ │ │ ├── hero.component.css
│ │ │ ├── hero.component.html
│ │ │ ├── hero.component.spec.ts
│ │ │ ├── hero.component.ts
│ │ │ └── portheropng.png
│ │ ├── index.ts
│ │ └── shared
│ │ └── index.ts
│ ├── assets
│ │ └── images
│ │ └── therealdealportfoliohero.jpg
│ ├── environments
│ │ ├── environment.dev.ts
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.json
│ └── typings.d.ts
└── tslint.json
Angular only points to src/assets folder, nothing else is public to access via url so you should use full path
this.fullImagePath = '/assets/images/therealdealportfoliohero.jpg'
Or
this.fullImagePath = 'assets/images/therealdealportfoliohero.jpg'
This will only work if the base href tag is set with /
You can also add other folders for data in angular/cli.
All you need to modify is angular-cli.json
"assets": [
"assets",
"img",
"favicon.ico",
".htaccess"
]
Note in edit :
Dist command will try to find all attachments from assets so it is also important to keep the images and any files you want to access via url inside assets, like mock json data files should also be in assets.
If you do not like assets folder you can edit .angular-cli.json and add other folders you need.
"assets": [
"assets",
"img",
"favicon.ico"
]
Add your image path like fullPathname='assets/images/therealdealportfoliohero.jpg' in your constructor. It will work definitely.
I am using the Asp.Net Core angular template project with an Angular 4 front end and webpack. I had to use '/dist/assets/images/' in front of the image name, and store the image in the assets/images directory in the dist directory.
eg:
<img class="img-responsive" src="/dist/assets/images/UnitBadge.jpg">
Just put your images in the assets folder refer them in your html pages or ts files with that link.
In angular only one page is requested from server, that is index.html. And index.html and assets folder are on same directory. while putting image in any component give src value like assets\image.png. This will work fine because browser will make request to server for that image and webpack will be able serve that image.
you can use like this
for the div background image
<div style="min-height: fit-content;
background-image: url('/assets/Get-started-section.jpg'); background-size: cover; background-position:center;
width: 100%; ">
</div>
And for the img
<img src="/assets/Get-started-section.jpg"/>
Related
I'm trying to make a simple webapp using Flask. When referencing my functions.js as src in the script tag, the app doesn't recognize it. My current file arrangement goes like this:
. ├── README.md ├── pycache │ └── application.cpython-39.pyc ├── app.db ├── application.py ├── functions.js ├── requirements.txt ├── static │ ├── favicon.ico │ └── styles.css ├── templates │ ├── control.html │ ├── index.html │ ├── layout.html │ └── login.html
And my html reference goes like this:
<script src="/functions.js"></script>
The weird thing is, html recognizes the files inside the /static folder, and when I put the .js inside it and change the path, it's referenced, but when I make a new folder named js, put funtions.js inside it, and change the path (Which would be /js/functions.js), it isn't found.
The value of the src attribute has to be a URL.
The webserver has to translate that URL into a set of instructions to read the file.
It is configured to do that for /static. This is a traditional place to put static files.
It is not configured to do that for any other path. If /functions.js worked then /application.py would and your server-side code would suddenly be public.
Keep your static files in the static folder. That is what it is for.
I recently started learning Flask and everythings went well until one point.
So, my project is structured this way:
FlaskApp Folder, which contains : Templates(a folder which contains: index.html , layout.html and styles(folder) and javascript(also folder) and application.py.
I included my css in the layout.html (layout.css and bootstrap.css) after the title tag like this:"
<link rel="stylesheet" type="text/css" href="styles/layout.css">
<link rel="stylesheet" type="text/css" href="styles/bootstrap.css">
And at the bottom, before the i added the javascript file of the bootstrap:
<script src="javascript/boostrap.js"></script>
After all of this, i added some html into the index.html from the bootstrap documentation page, such as alert messages...
And there is no CSS applied.(I mention that i've restarted the Flask App).
PS: i added a:
body{ background-color: red; }
to the layout.css and it's still not working.
Thank you very much !
This is strictly for development only.
So, you need to have two directories under your app, those are: static and templates. The *.html files are usually palced under templates and *.js and *.css files are placed under static.
So your app structure might be something like:
app
├── app.py
├── static
│ ├── base.css
│ ├── base.js
│ └── index
│ ├── index.css
│ └── index.js
└── templates
└── index.html
Now, lets move onto how to link these.
In your HTML file, replace the current <link> and <script> tags with something like this:
For CSS:
<link rel="stylesheet" type="text/css" href= {{ url_for("static",filename="index/index.css") }} >
For JS:
<script src= {{ url_for("static",filename="index/index.js") }} ></script>
And finally, ensure your python's route returns the appropriate html page. Simplest is to use render_template function.
#app.route("/")
def home():
return render_template("index.html")
I am trying to set up a personal homepage with Jekyll using the domain provided by my University.
An issue that I have not been able to resolve is Jekyll forcing me to use absolute paths which I believe are not compatible with the webpage hosting service.
The _config.yml file determines how Jekyll generates linkings in the index.html file which is the homepage. _config.yml looks like this...
title: Homepage | Ishank Juneja
email: ishankjuneja#gmail.com
description: >- # this means to ignore newlines until "baseurl:"
Personal homepage Beta version
baseurl: "foobar" # the subpath of your
site, e.g. /blog
url: "http://home.iitb.ac.in/~ishankjuneja" # the base hostname & protocol for your site, e.g.
http://example.com
twitter_username: ishankjuneja
github_username: ishank-juneja
# Build settings
markdown: kramdown
theme: minima
plugins:
- jekyll-feed
An example of the (many) linkings it generates in the index.html file is
<link rel="stylesheet" href="/foobar/assets/main.css">
This link explained to me that this is, in fact, an absolute path, which didn't seem like a problem to me, but the Directory Tree on the Web hosting service looks like,
public_html
├── 404.html
├── about
│ └── index.html
├── assets
│ ├── main.css
│ └── minima-social-icons.svg
├── feed.xml
├── index.html
└── jekyll
└── update
└── 2018
└── 10
└── 04
└── test-post.html
The URL for my homepage http://home.iitb.ac.in/~ishankjuneja/ is associated with the folder public_html, so the path for main.css above would be incorrect. Something like href="assets/main.css" works well, but there seems to be nothing that I can type in _config.yml to get this result.
In configuration you have to properly set up baseurl:
baseurl: "~ishankjuneja"
Then use
{{site.baseurl}}page.url
In your example , putting /foobar (the baseurl in _config.yml) is not a good idea.
Using absolute URl is not a good idea either as you have said.
The solution is to use relative_url Liquid Filter as
<link rel="stylesheet" href={{"/assets/main.css" | relative_url }} >
similar solution as #Aleksandr Kiselev suggested.
Use {{ page.url | absolute_url }}
Liquid filters description: https://jekyllrb.com/docs/liquid/filters/
new guy here, even tho i have been using this website a lot as a silent reader and it always helped me out so far but this time i didn't find what i was looking for. Right now i am trying to write a polymer element which should include a picture.
So this is the file structure of this element:
├── images
│ └── image.png
├── node_modules
├── package.json
├── package-lock.json
├── polymer-image.js
└── polymer.json
relevant code of my polymer-image.js:
<div id="container">
<img src="images/image.png" width="300" height="300">
</div>
content of this compoment's polymer.json (trying to include this image somehow):
{
"sources": [
"images/**/*",
"/images/**/*"
],
"extraDependencies": [
"images/**/*",
"/images/**/*"
],
"npm": true,
"lint": {
"rules": [
"polymer-3"
]
}
}
I am installing this component in my application via npm and including it in my-view.js with an ES6 import The problem i have is that this image isn't contained in the build (es6-unbundled folder in my case) made by polymer build on application level.
The file structure of my build looks like this:
.
├── index.html
├── node_modules
│ ├── #myName
│ │ ├── my-polymer-image
│ │ │ └── polymer-image.js
│ ├── #polymer
## a lot of other stuff here##
├── push-manifest.json
├── service-worker.js
└── src
├── my-app.js
└── views
├── default
│ ├── my-view.js
├── home
└── view-manifest.json
So image.png is nowhere to be found there.
What am i doing wrong here? Thanks in advance for your help :)
This one has me scratching my head. My other pictures are working except my banner image. I am unable to figure out why it is not appearing, I have tried ../images/topb.jpg and ../topb.jpg. Any suggestions will be great! Here is my code:
<img src="images/topb.jpg" alt="topb"/>
So the directory hierarchy is as follows(couldn't post a picture not enough rep yet):
redesign
├── Css
├── images
| └── topb.jpg
└── home.html