I've got a (Polymer) web component that I want to make accessible to people in a cross-origin resource sharing (CORS) fashion. That works fine except I'm not sure how I can give a relative path for resources like images and JSON files from JS code inside that component. They are interpreted as relative to the containing page, not relative to the HTML import. What I think I want is a JS variable that gives the path of the containing html file that was imported. A relative path is important because I also want people to be able to easily deploy this to their own site and not rely on a hardcoded path to my copy of a resource.
For example, you load index.html at example.com and it has:
<link rel="import" href="//my-site.com/components/my-component/my-component.html">
<my-component> ... </my-component>
Now inside my-component.html, I have some JS that loads some resources based on the user's profile - images and JSON language files for i18next.js. The problem is that unless I specify them as an absolute path to my-site.com, which I don't want to do, they will be interpreted as relative to the page at example.com/index.html, not relative to the path of my-component.html
Any images that I specify statically in my template work fine and load correctly because it's relative to the HTML Import path. I'm just not sure how to do this for resources loaded from JS because they will be relative to the containing page (example.com/index.html). Is there an attribute or function somewhere that exposes this import path? Thanks.
To create relative paths you can use the resolvePath method of your Polymer element. Here's the docs on it
ex: this.resolvePath('x-foo.png')
Update: resolvePath is replaced with resolveUrl for Polymer 1.0
I found out that you can access the URL of the import from within a script inside it with document.currentScript.baseURI. I'm doing something like this:
<script>
(function () {
var srcURL = new window.URL(document.currentScript.baseURI);
var baseURL = srcURL.origin + srcURL.pathname.substr(0, srcURL.pathname.lastIndexOf("/") + 1);
// can use baseURL here to load resources
Polymer({...});
})();
</script>
One problem: the code above isn't working when I vulcanize everything because the paths change. I'll look into that one a bit later.
Related
My frontend app is running at port http://localhost:3000.
I have an endpoint that returns the css file for specific id(i.e. 88871) as following:
http://localhost:8080/api/getCssFile/88871
I need to add this css file dynamically to head of the index.html file as follows:
let cssUrl = "http://localhost:8080/api/getCssFile/" + id;
let link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', cssUrl);
document.head.appendChild(link);
This will add following code to head of the index.html file.
<link rel="stylesheet" type="text/css" href="http://localhost:8080/api/getCssFile/88871" />
All looks good. However, Css is not being reflected in the webpage. Css file will be downloaded when this link is clicked instead.
http://localhost:8080/api/getCssFile/88871
Am I missing anything here?
I tried loading css from the api however, the css is not being reflected in the webpage.
The reason your approach is not working is that you are loading the CSS file through JavaScript which runs after your document has already been loaded, so the document does not know about the link as it has already been "painted" by the browser.
I'm not sure why you've chosen the path of having a backend service return a CSS file, but my advice would be to avoid that. If you want shared styling that updates periodically consider creating a NPM library that exposes the stylesheet and consume that within your app.
I am trying to import image from 'images' folder inside 'home.js' file which is inside components folder. I tried many combinations of '../' and './', but image doesn't load on page. There is probably something wrong with a path.
Since you are using React, did you check if the component is even being rendered to the view at all?
Additional factor could be your applied classes 'home-wrapper' or 'backImg'
I usually add some placeholder text to check if it pops up.
Regarding to Omars answer, that's right you would only need to go back two directories to access that image, like so
<img src="../../images/astronaut.png" alt="astronaut"/>
When you provide a relative URL, it has to go from the URL of the HTML to the URL of the image.
You are trying to go from the file path of the JavaScript file to the file path of the image.
Since the image is not in the public directory, it is quite likely that the image doesn't even have a URL in the first place.
There are two basic approaches you can use to determine the URL here.
Manually
You need to put the image somewhere it has a URL.
How you do this will depend on the HTTP server you are using. You will need to ensure that the image has the same URL (or at least one relative to the HTML document) in both your development and production environments.
For example, you could put it in the public directory, then say src="public/images/yourimage.jpeg". (Note that I'm making assumptions about how your development server allocates URLs to files in the public directory here).
Use your bundler
Typically when using React (as you appear to be doing) you will use a tool like Webpack to generate a production ready version of the site. This will do things like removing slow debugging routines, tree shaking to remove code from modules that isn't being used, and so on.
Webpack has features for handling images so once you set up the configuration file to support it, you can then do:
import MyImage from '../../../images/yourimage.jpeg';
and
<img src={MyImage} alt="etc etc" />
Note that the path here is relative to the JS file and that you need to use {} to assign a variable's value to src.
The correct syntax in react is:
import astronaut from '../images/astronaut.png';
<img src={astronaut} alt="logo" />
I am developing a website on a web server which can be accessed by 2 URL: mywebsite.example.com or example.com/mywebsite. For example, when I access mywebsite.example.com/images/abc.jpg and example.com/mywebsite/images/abc.jpg, I get the same picture.
The problem is, I have many links inside my website, and I am not sure should I use an absolute or relative path.
From another question
Absolute vs relative URLs
I found someone suggesting using URL relative to root (like /images/abc.jpg), however when I access the website using example.com/mywebsite, every link just break.
For relative paths, I found it hard to manage since webpages are in different folders, but using the same template which contains some links. It means I have to manually set some links as ../ and some as ./.
I have also tried using <base> tag however it messes up with anchor. Even if I try to include the full path before the # symbol, some jQuery libraries does not function properly since they get the value inside the attribute href directly, but not extracting the part after #.
Would there be any better practice or suggestion?
I think you should use relative urls, and concentrate your searchs on how to use relative urls in templates, that would be resolved relatively to the final page.
I don't know the technology you are using for templating, but I see two common solutions :
declare a "relative path" variable in the template, and then override it in the different pages, with the new relative path. Use this relative path as a prefix for all urls
delegate urls construction to a service that would know the final page. Somethinkg like resolveUrl(..)
I use PhpStorm 9 and I have project structure similar to this:
src/
elements/
element-alfa/
element-alfa.html
element-alfa.scss
templates/
application.html
index.html
I use Polymer so I have to import the elements when I use them. I also use AngularJS, which direct the app after load to application.html, but in fact paths are like from the index.html file.
<link rel="import" href="elements/element-alfa/element-alfa.html">
I have set the src/ directory as RESOURCES ROOT so it does not tinged the background color under href path but if I use auto hint (CTRL + 2x SPACE), it returns the path relative to the file application.html, not relative to the index.html (or my resources root) as I wanted to.
How to achieve it?
Currently, the only way to do it is to type/autocomplete each folder one by one sequentially: first elements, then element-alfa, and then autocomplete filename. I created a feature request about this: https://youtrack.jetbrains.com/issue/WEB-30888
I'm currently working on updating a "legacy" website to xhtml/css, so that I can go ahead and proceed on a re-design. All of the pages have the header included via PHP. The issue is is that if I reference the style sheet from the header as "style.css" it looks in the current directory for the style sheet where of course there is no style sheet. Do I need to use an absolute path, or is there a better way to do this?
The line below should work in any HTML/PHP file in any directory, included/required or not, as long as the directory "assets" is in your home directory. I think i'm right in saying this is true for all "href" attributes (i.e. in anchors).
<link href="/assets/css/style.css" rel="stylesheet" type="text/css" />
If you're including a CSS file with a PHP inluclude, you must know the relative path from every file in which you are running the include function - no absolute URLs are allowed.
The path to the CSS file is relative to the URL which you used to request the main PHP page (the one in browser address bar), not to the local disk file system path where the PHP page is located in the server machine. CSS files are namely loaded by the webbrowser, not by webserver.
So to figure the relative style sheet path which you'd like to use in <link href> in the HTML head, you need to know the absolute URL of both the PHP page and the CSS file so that you can extract the relative CSS path from it.