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" />
Related
I have an html file in which I would like to display an image called plot.png with the line <img src="plot.png" alt="Stock price vs. predictions graph">. On my website, I only see the alt text, meaning that my image did not load properly. In my command prompt output I see that I have a get request to /mysite/home/AAPL/plot.png, which is extremely frustrating because this means that when I search for the image this code is just placing it in the url (which is localhost../mysite/home/AAPL). I have tried putting plot.png in the same working directory as my html file as well as trying the absolute path to plot.png starting with C:, but nothing seems to get the search out of the url. Please help, thanks!
If it helps, im using Django
You can put the image in the same working directory (in the same folder as your html file) and then use
<img src="./plot.png" alt="Stock price vs. predictions graph">
The "./" is important as it signals that the image is in the current folder.
You could also use a website like www.linkpicture.com to generate a link to host your image and then use that link in your img
Some web browsers automatically disable images from loading. Fixing this could be as simple as selecting “show all images” from the browser's settings menu. It's also worth checking if the device you're using has security software or extensions that could block images.
Again you can use this tag for .png type photo
<img src="exampel.end">
//use extension type .end instead of .png
I forgot to mention that I was using the Django framework and the html templates work much differently than regular html files do. In Django you must put the image in a static folder and then call if with Jinja like so: <img src="{% static 'mysite/image.PNG' %}">
My website on my server does not want to show the on server saved image.
The path is relative and to my information correct, but I always get a 404 error.
Found no solution after browsing endlessly.
All nessecary information is found in the second picture posted.
Apparently, you use a Framework. The file you have in the view folder isn't the one you send to the browser, it's just a source file that will be used by your Framework entry point: public/index.php. Your root folder is therefore public.
Two things must then be understood:
Even though the line your type is in application/view/index/index.php, the browser will only see it as index.php, located at the base of your site (http://localhost/index.php or somethig like that). The relative path must therefore be written as relative to public.
As your root folder, public, is seen as http://localhost by the browser, you can't use .., there is nothing above the root of your website, for the browser. You must do one of the followings:
Place your image in public/_images instead of application/_images (normally, all the files that can be sent without passing by the PHP preprocessor can go in public)
Place it wherever you want and create a controller that maps a custom URL to your image. Something like /images/(:any) maps to a controller looking into your specific image folder (please, don't, it's not because you can that you should).
My advice: create a public/img folder and place it your images, then you load it with <img src="/img/title_image_me.jpeg" alt="My picture">. (The initial / is very important there!, it's understood as the root folder of your website, Linux-style).
I do a lot of off line programming.
Sometimes for example this path /a/b/c/d.html
to go backwards to an anchor at a/a.html
I frequently see ../ or ../../ what do they mean, how are they used?
how do I use them and not have to put the entire path of the website in,
if the main site is html.com
how do I use the folders without using html
example I want the anchor at a/a.html without using html.com/a/a.html
would this work the same to not have to use it? ../a/a.html
did not work in offline mode
explain please
so that I don't have to re write the links from offline to public html
and the sites name
../image.jpg means 'go up one directory and use image.jpg'
./image.jpg means use the image in this directory
/image.jpg means 'use the image from the root directory of the website'
So this example:
<img src"../../images/image.jpg" alt="an image">
Uses the image from 2 directory levels up and then go in the images directory and then use image.jpg.
That should get you started.
I am trying to include some images in a Genshi template for my Trac plugin, but it always shows only the alternative text because it cannot find the images.
I have the following (X)HTML code:
<div>
<img src="file://c:/path/to/image.png" alt="asdf" />
</div>
When I use this code with a simple html file and open it in the browser, the image is displayed correctly, which means that both the path and syntax are correct.
But when I insert the code snippet into a Genshi template and use it within Trac, the image cannot be found. However, when I look at the HTML source code in the web browser and copy the URLs into a new browser tab, it is again displayed correctly. This means that only the server cannot find the image.
The images are in a directory inside the python-egg file, and the path points directly to the directory created by Trac, which also contains my CSS and HTML files, both of which are loaded correctly. The images are correctly referenced in the setup script which creates the egg.
How do I have to reference images in (X)HTML documents when using them with a server?
Is there a special way to include images in Genshi documents? (I haven't found one.)
Thanks to the comment of RjOllos and this site I was able to fix it by trying all of the URL types. Although it says for a plugin to be /chrome/<pluginname>, it was actually just /chrome that worked. See the edit below! So the full URL is then <ip>:<port>/chrome/path/to/image.png.
EDIT: I discovered I actually used the /chrome/pluginname version, just that I did not use the name of my plugin as "pluginname". See my comment below. It seems like /chrome/pluginname should actually be /chrome/htdocsnameor something like that, in case you use a different name rather than the plugin name when implementing the ITemplateProvider. In my case I called it images, which was the same name as the folder. END OF EDIT
Another mistake I made was forgetting the initial slash (chrome/path/to/image.png), which caused Trac to assemble the URL to <ip>:<port>/<current page>/chrome/path/to/image.png.
How do I to make an absolute URL that refers an image into my root repertory app ?
I've tried this using /projetForum/WebContent/images/angry.gif as URL but it doesn't work.
str = str.replace(":D", "<img src=\"/projetForum/WebContent/images/angry.gif\" title=\"heureux\" alt=\"heureux\" />");
Thanks in advance.
When looking closer at the URL which you attempted to use, the presence of /WebContent folder is suspicious. This is recognizable as default web content folder name of a typical Eclipse web project. This in turn suggests that you actually used a local disk file system path relative to the IDE workspace root folder in the <img src> and somehow expected that it represents a valid URL.
This is wrong. It's the webbrowser who has got to download the image by a valid URL once it encounters the <img> element while parsing the obtained HTML output. It's not the webserver who has got to magically inline the image's content based on local disk file system path or so. That's not how HTML works.
Provided that the webapp's context root is projectForum (and thus the whole webapp is available on http://localhost:8080/projectForum/), then the image should be available on the following URL http://localhost:8080/projectForum/images/angry.gif. Try it in your browser's address bar first.
Once you found out the right URL, then you should substitute exactly that absolute/relative path in the image's URL so that the generated HTML output ends up like this:
<img src="/projectForum/images/angry.gif" />
By the way, the smiley :D does not look like angry to me.