I'm trying to load SVG image from JSON file that contains a path like this -
<img src="../images/filename.svg"/>
and the image doesn't load.
When i try to do this it works-
<img src="/static/media/filename.9f72c13b.svg"/>
What is the difference? Why does the second work and the first doesn't ?
Is there a way to change all of the first paths to be like the second?
Thank you!
../ in a path means one level up from the current folder. So your first path is a relative path, and the second one is an absolute path. Besides, those are pointing to 2 different file-names (filename.svg and filename.9f72c13b.svg). First, you need to figure out to which file you want to refer, and then make sure it's present in that your specified location.
Is there a way to change all of the first paths to be like the second?
Yes, you can just use a simple text-replacing feature of your text-editor, say for example notepad++ which can do replace text with regular expressions and in multiple files simultaneously.
A note about the 'current directory': it's a bad idea to rely on assumptions about it, because on some platforms it may not be what you want, or it may even change from version to version.
Related
I am creating a website with simple HTML+CSS. How do I create a hyperlink (href) in an HTML file, to an HTML file in a folder, that is not directly related.
See picture. If I want to insert a link in HTML 4 to HTML 3.
I know one can use ..\HTML2.html to go back in parent folder, but what is the best way here?
Typing / points to the relative root directory. So you can just do HTML 3 and it should take you to HTML3.
You can also use HTML 3 as you seem to know.
General recommendation would be to pick the closest path. If it's from the root, then select the first. If it's from a relative point from where you are, then the second.
Considering your drawing, I assume that node 1 is the root so the simplest way would be: .\html3.html
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" />
We have a wiki that was brought back from the dead using a torrent image archive of 32gb+ (that's compressed).
We ran importImages. That created sub-directories, probably from the image paths of the wiki articles.
Well, we have a lot of images not loading correctly (white space).
Turns out the importImages did not move all the images into their correct subdirecotires.
When you look up the image, it will have the expected sub directory i.e. images/1/1a/hello.jpg
But, the actual file is still in images/hello.jpg.
If you try to reupload the image using the single file uploader, it gives you an overwrite warning, ignoring this warning corrects the image, and stores it in the right subdirectory. But we have 200k+ images, and you cannot overwrite images using uploadWizard.
Is there a way to fix this? A parameter we can run, or a way to set all image paths to use just .../images/?
We are using version 1.35.1
Perhaps, $wgHashedUploadDirectory or $wgLocalFileRepo is not set correctly on LocalSettings.php. If this is not the case, try to launch importImages.php with --overwrite option.
I know this is a noob question, but I haven't really encountered this yet or have dealt with it using .NET's RelativeUrl(). I just modified the directory structure of some flat HTML files and everything is broken. Of course I know why and how to fix it, but I was wondering if there was a failsafe, non-backend solution to always getting the correct path for your assets (img, script, css, etc)
Right now I know I'm going to have to do "../../[directory]/[file]" but I was hoping there was something easier that I just haven't come across.
Thanks
Have you come across root-relative paths? Basically they're paths that are, obviously I suppose, relative to the root of the website, of the form:
/directoryName/fileName.html
Further information: http://www.motive.co.nz/glossary/linking.php
you can simply go from the root folder everytime by putting a "/" before your path
e.g.
<img src='/images/image.jpg' />
If I find a webpage I want to tinker with and I save the source to the desktop, change a couple of bits, and then re-open - then often all the src and hrefattributes don't work as they are relative to the original hosting folder eg /Images/picture1.jpg or /Scripts/script1.js.
Is there a way to 'trick' the browser into persisting these relative references? Preferably without going through every one of them and appending a path to the front - which I have also tried but without success. What is the format of the fully qualified path name for these resources?
Let me know if I'm not being clear.
<base>