I hope this question is not completely stupid. I am currently building a website using only plain HTML in Webpack. When I try to load images as usual, using the img tag and the src attribute, my images are not displayed. I found this in the webpack documentation. But there it only describes how I load images via JavaScript.
webpack Documentation
For all those who have a similar problem. You must first load the html-loader to be able to load images in your HTML files.
You need to specify image urls as described in the documentation. Then, Webpack will bundle everything together, place your images in the output folder and generate the final URL.
Now, when you import MyImage from './my-image.png', that image will be
processed and added to your output directory and the MyImage variable
will contain the final URL of that image after processing.
Webpack uses JS to process all the files, however JS may not be needed to load the images on the page.
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" />
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' %}">
I have an Angular Application with the following structure:
Structure
As you can see, there is a backend directory (yellow marked) in which other directories exist, such that the following path is valid: backend/uploads/users/user123/unnamed.jpg.
Now I want to use that image in my app.component.html
<img src="">
I tried to put the path in the src-property in different ways but the image is not appearing. How would the src has to look like to use that image in my Angular project?
I guess you are using the angular CLI. Therefore you should put the image in the assets folder. Try again than and it will work.
Like this:
<img src="/assets/images/unnamed.jpg">
EDIT: I am sorry, did miss out that part. You need to edit the angular.json file for this. Add the path of the backup folder there to the assets. But the backup folder must be in the src folder for this to work. Thats my suggestion for a solution.
So you will be adding "src/backup"
I don't think what you want to do is actually feasible. if you want to use an image in an Angular app, it's either an asset and you put it in the assets folder, or it's a resource coming from your backend and you will have to write a proper mechanism to expose the wanted resource, and then use it in your Angular app.
I have an image file in the same directory as my login.vue component (which is where the following code is located). But, when I try this code, the image will not load:
<div background="benjamin-child-17946.jpg" class="login" style="height:100%;">
I'm getting this error:
Failed to load resource: the server responded with a status of 404 (Not Found)
This is strange, because I can see in my terminal that my image is in the same directory as login.vue. I am using webpack to compile. What might be causing this?
Your primary issue is that single file components are compiled and the compiled script is very unlikely to reside in the same directory as the current location as your image. Your second issue is that you are not assigning the background image to your div correctly. You should use CSS.
I would suggest that you make an images directory in the root of your electron application (or assets or static or whatever you want to call it). Then, you can reference files in that directory using the file:// protocol.
Second, I would recommend you define a CSS class and use that. So, in your single file component, define this style section:
<style>
.background {
background: url('file:///images/benjamin-child-17946.jpg') no-repeat center center fixed;
background-size: cover
}
</style>
And on your div just use the class.
<div class="login background">
Finally, you could also use webpack's url-loader to load the file as a dataUrl but I would recommend that as a more advanced exercise and just stick with the simple method for now.
Edit
I created a project from scratch using electron-vue which uses webpack and I did run into an error with the above using the file:// protocol, that I don't run into when not using webpack. With the above template, instead of using
file:///images/benjamin-child-17946.jpg, put the file in the static directory and use /static/benjamin-child-17946.jpg. That allows vue-loader to work properly.
If you are not using electron-vue, then your webpack configuration may be different.
Worth noting that background is not a valid HTML attribute anymore.
Compiled VUE code doesn't match the way the folders are built, assuming you're using the CLI.
You would need to reference the images full URL in its static resource location.
I'm not sure what that would be in this case as I haven't used static resources with the Vue CLI yet.
I just started using google app engine. In order to use templates, I'm using jinja2.
I want to add images dynamically after I set the width and height of the img tag. I used
PIL in order to read the image size and put the one I want.
However when I open the image with PIL, I need it not to be in a static_dir
and to put the image in the img tag, I need it to be in the static_dir.
As a testing solution I've copied the folder to see if I get results and I did. But as
you can see having each image saved twice is kind of bad.
If you want the file to be both static (served fast by not having to pass through your app) and available to the app, note the application_reabable option in the description of static file handler patterns. It does want you want without you having to duplicate files.