In my tsconfig.json file, I have a "compilerOptions":{baseUrl} that enables me to look for images in public/images/foo.png like this <img src='images/foo.png/>.
Which is still working, except in my nested routes. It's working in line 16 and other routes that isn't nested, but not in line 17 even though I copy pasted it to make sure they have the same spelling and caps.
I've also tried looking into Browser's dev tool's inspector to see if they have similar src, which they do but the one has problem loading the image. working src not working src
You should always precede the image path with a forward slash '/'
like this
<img src='/images/foo.png/>
NOT like this
<img src='images/foo.png/>
When you tell the browser to look for images/foo.png when the current route is /foo/bar, for example, the browser will search for /foo/images/foo.png.
To avoid this, add a slash at the beginning of the path (e.g. images/foo.png would become /images/foo.png).
Related
I'm working on a react app. Everything works fine in development. When I make build using npm run build and test it then some images on page are shown and some images are simply not found. I can see that user avatar image is shown but all other images are not shown. I inspected code in browser and checked src of image. Path is good and image is also available in ./static/media/card-1.7a6bc100.jpg but not showing on page. Then I inspected code of user avatar image, src looks similar and that image is working fine. I'm not sure why its behaving like this. Below is my source code looks like.
import marc from "assets/img/faces/marc.jpg";
And then my img tag looks like:
<img src={marc} className={imgStyle} alt="..." />
it always spits out ... these dots which means image is not loaded, but image is available there and path is also perfect when I inspect this image in browser. Can anyone help me why it is doing this on production? It's been hours while working on this but didn't found any solution.
Any help will be highly appreciated.
Thanks.
If you are using create-react-app, assets will also need to be served inside src. You should also reference the image using relative path, not absolute path. For example:
image is under src/assets/img/faces
your code is under src/some-folder/your-code.js
// your-code.js
import marc from "../assets/img/faces/marc.jpg";
Put your images in public/images/ folder and use like this
<img src="/images/logo.png" className={imgStyle} alt="Logo" />
I have a webpage at a certain url, say https://example.com/foo/bar/xyz
In this said page, I have multiple anchor tags with root relative paths, e.g. Link 1
Now when I hover over these links, my browser shows a valid preview of them, i.e., it shows https://example.com/blah/rand/abc which is expected, but on clicking them, I get routed to https://example.com/foo/blah/rand/abc
I find this behavior very strange and I have verified that the html served at the original url does not have any <base> tag in the head section. Is there any other way to control the base path for a relative url?
What's also strange is that there are a bunch of css files loaded through their root-relative paths, and they seem to be loading fine. So, I suspect something in the javascript on the page to be interfering with these. Also to add context, this is a SPA built on backbone.js - so the base html returned by url mentioned in line 1, just returns a skeleton html with a div where the actual app is initialized - which is where these buggy anchor tags eventually turn up.
I have some relative links in a development.md and all links are on the same site.
For example:
* [Scripts](#scripts)
##Scripts
here commes an lot of text
After pushing to github, the links works. Then I pushed the site to Github
Pages and the links don't work anymore.
On Github I see the path in the browser
https://github.com/name/project/blob/master/docs/development.md#scripts
On Github Pages I see this path in the browser
http://ux.example.com/#scripts
How can I solve this problem? I don't use Jekyll.
I got this answer from github. As this is a React app, and not something to do with GitHub Pages, I'm not sure how much we will be able to support it. However, it looks like whatever router you're using to configure your page may be getting confused. Because your router is using a # character I believe it's trying to change the page, but no page for #scripts exists. Finally, it looks like your scripts section is missing the id="scripts" required to make anchor links work.
I found this solution
The solution is very simple
* [Scripts](#scripts)
##Scripts <a id="scripts"></a>
here commes an lot of text
I am busy building a small gallery that is pulled from my local file system. I have an element that gets the directory:
<input type="file" webkitdirectory>
I then display all the images and videos in that directory on the page in a container.
At the moment for security reasons I only have access to the relative path so I had to add a hardcoded e:/downloads for it to find the files when I display them because the location of the file is on my desktop.
I want to extend this so I can choose a directory from anywhere on my local file system, but I need the aboslute path. Currently only IE gets me the absolute path, chrome returns a fakepath. I know how to get to the settings to allow local file system files to be included in IE, but I don't know how to enable it in Chrome. I would like to know if there is an option to allow this like in IE.
I have done searches around and most people say it is not possible, however I believe there must be a setting somewhere, I am hoping someone knows.
Here is my code just for kicks if you want to have a look:
https://jsfiddle.net/3mp1znx9/
Please note because it is hardcoded to e:/downloads you might want to change it to make it work for you.
You can open up the console and run the function called GetDirectory if you want to see the absolute path it tries to return. (you should also comment out the removal of the element after it has changed as well)
I hope my question was clear and not too long. Thank you.
Summary:
I want to access the absolute path of my local files from the element within Chrome. I can already do it in IE.
I finally found a solution to my own problem. It is nearly impossible to get the absolute path with Chrome, it only works with Internet Explorer.
So the solution is to use the temporary path.
URL.createObjectURL(e.target.files[0])
This is what was needed, I then use this as the src. I hope this will help someone else when they stumble upon this one day.
I've been wondering how do other websites do their navigation links.
What most beginners like me do is put the whole link inside the tag
News
or something like this:
News
But I've seen a lot of websites lately that does this:
News
and then the browser address bar display it like this
http://www.example.com/news/
First I want to know how do you call this method? and what are the advantages of doing this. and lastly, how does it actually work?.
I want to research about it but I don't know what to type on google. I did try a lot of keywords I could think of that relates to this but nothing comes close to what I'm looking for
There's 4 basic link types:
self-link: href="". This is a short-hand form of "link to yourself". You'll see it used for in-page anchors, such as href="#top" and the link.
relative: href="news.html". Clicking on this will try to load a news.html page in the SAME directory as the page that the link is contained in, so if you're on http://example.com/foo/bar.html, you'll be trying to load http://example.com/foo/news.html.
local absolute: href="/news.html". This will try to load a news.html page from the document root of the site. If you're on http://example.com/foo/bar/html, you'll be trying to load http://example.com/news.html. The leading / is what makes this a local absolute instead of a relative path.
full absolute: href="http://example.com/news.html". A full-blown url, which can point to a completely different site if need be. It CAN be point to the exact same site you're on, but essentially it's a "go over there, no matter where over there is".
This has to do with HTML, not JavaScript. Your first snippet uses an absolute path. The second two use relative paths. For more information, read this: http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
The best practice (for me?) is the first one, you need to write all the URL for the most readable code..
The first and the 3rd link are the same if you are on the same domain name..
The 2nd is different, if you are on www.example.com/index.html you'll go to www.example.com/news.html..
But if you are on www.example.com/categoy/index.html you'll be redirected to www.example.com/categoy/news.html and not on root directory.
But I don't understand why you talk about /news/ directory ?
Relative URL's will probably get you some results.
news.html will navigate relative to your current location
/news.html will navigate relative to the root domain name
For example if your current location is http://example.com/sub/ :
href="news.html" will get you to http://example.com/sub/news.html
but
href="/news.html" will get you to http://example.com/news.html
See also http://www.w3.org/TR/WD-html40-970917/htmlweb.html#h-5.1.2