I want to display the image from my local , but it is showing like this.
I don't understand what is wrong here!
The below img code i'm using in provider.js file
<img src='../../../public/icons/videoOn.png'/>
After looking at the screenshot, this looks like a React JS project. For static assets, you need to import them, but only when they're inside the src folder. If they're inside the public folder, you can do this:
<img src='/icons/videoOn.png' />
The above code should work for you. If you're deploying it to a non-root and should be safer, then use process.env.PUBLIC_URL:
<img src={process.env.PUBLIC_URL + '/icons/videoOn.png'} />
Don't use path as src, because it must be accessible via web.
Means you need src="http://example.com/public/icons/videoOn.png" or src="/public/icons/videoOn.png"
In that situation always check Network tab and see from where your browser tries to get file. You must be able to go to same URL and access file
Related
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" />
This might be a really stupid question, but here goes nothing
Currently I have the following in my HTML:
<div class="disk-images">
<img src="../public/images/blueflame.png">
<img src="../public/images/purpleflamelogo.jpg">
</div>
I have not styled it in my CSS, but AFAIK, this should not be a problem, as the default style sheet should still take care of it.
I also know the path to these images is correct as, when I Ctrl + click on it in VSCode, it shows me the image.
This is what it shows instead:
This would suggest, that the path to the images are wrong, however, as previously stated, I do believe the path is correct. Any help would be greatly appreciated!
For people having the same problem in the future, the problem was with express and how static files in express work.
I had the following in my app.js
app.use( express.static( "public" ) );
which meant the root folder for my static assets was actually another directory.
You can read up on it here
you can check your console for any 404 messages, and try to close the whole project and re-open it in your editor and browser as you may working on an old version
relatively path is correct but the files in the public folder are static files such as index.html, javascript library files, images, and other assets, etc. Files in this folder are copied and pasted as they are directly into the build folder. Only files inside the public folder can be referenced from the HTML.
Updated code:
<div class="disk-images">
<img src="images/blueflame.png">
<img src="images/purpleflamelogo.jpg">
</div>
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' %}">
How would you proceed to add a picture to a website (in html or css) from your own computer?
I know how to add a picture using a url but what if the picture is stored in a folder on my computer and not on the internet?
<img src="path/to/image/image.png">
You only have to give the location of the image, use as reference the .html location.
Exs.:
<img src="image.png">
if your image is in the same folder of your html file.
<img src="../image.png">
if your image is outside of folder where your html file is and so on.
When you do that, you are going to be the only one able to access your page. If you want other people to see it you should be stored in a public folder in your web server. Look for XAMPP if you are a windows user.
If the website is hosted on your computer then you can use your images stored on your computer.You can use <img> html tag to display image.
Otherwise if it is on some remote server, then you will need a static ip and a server on your computer to host images to remote server. It is not possible to have have server on remote internet location and images on local.
If website is on internet then copy the image to server and provide path.
You can using the img tag to do this
https://jsfiddle.net/moongod101/dh55b4rz/
PS: I'm the creator of Codepenimg
Let’s pretend we have an image of a car on our computer saved as “funny-dog.jpg” and we want to insert it into a webpage; this is the code we would use:
<img src="funny-dog.jpg">
Let’s analyze this code. First, is the code for creating an image element. Next, the letters “src” are used as an attribute and stand for “source”. Basically, we need to provide the web browser with a value to the source of the image. Naturally, the value for the source attribute is “funny-dog.jpg”. This example assumes your image file is located in the same directory as your HTML file. If, for example, you had your image file inside a folder named “images” your code would look like this:
<img src="images/funny-dog.jpg">
There is one additional bit of code we must add before we are finished. We must assign an “alt” attribute and value to our image. The “alt” attribute stands for “alternative” and is used to provide a text-based alternative for viewers incase the image will not load, or if they are visually impaired. Here is what our code will look like:
<img src="funny-dog.jpg" alt="A funny dog sitting on the grass.">
Here I have one sub domain and folder in following URL buyjapon.This is website is belong Yii framework.
basically,we called image path as <img src="/images/usd_C.jpg" /> .I create folder in my domain in migrate into that folder, then i want to call image src just like that <img src="/images/usd_C.jpg" /> but it will not show image properly.
I have include base href in head tag
<head>
<base href="http://demo.osiztechnologies.com/buyjapon">
</head>
Note: When i call image src like this <img src="buyjapon/images/usd_C.jpg" /> it will shown correctly. but i want to change entire website by adding buyjapon in image src.
How to call this..Please guide me..
If your URL's to pages do not require the /buyjapon folder name to be present, then one option would be to create an image controller, that opens up the requested image from the images folder, and outputs it to the data stream. I do this in situations where different translations of the same image are required for different users.
However, it looks like maybe your webserver is not set up correctly - if you are using apache have you set up a virtual host for your website? That will probably solve all your issues. Look here: http://httpd.apache.org/docs/2.2/vhosts/examples.html and at your current virtualhost setup to see what to do.