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.
Related
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.
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 am trying out CSS's shape-outside:
shape-outside: url(image_file.png)
Example: https://jsfiddle.net/quzaorg0/3/
However, if I tried this example on the local machine (and used the path just as pikachu300.png for the HTML and CSS), and opened up the HTML file in Google Chrome or Firefox using the file system, then it wouldn't wrap the text around the image.
I had to start a local web server (any local web server, or simply by using ruby -run -e httpd . -p 8080), so that the CSS was able to get that image and wrap the text around the image.
The HTML and CSS had proper URL path, which is just the filename:
The CSS:
#intro-img { float: left; shape-outside: url(pikachu300.png); }
The HTML:
<img id="intro-img" src="pikachu300.png">
So the HTML could load the image, but the CSS couldn't load that image. It had to be served by a local web server.
I tried also
#intro-img { float: left; shape-outside: url(file://pikachu300.png); }
and it didn't work either. Why would the path work for HTML but not CSS, and how to make it work if it is tested as local files?
P.S. in the Developer Console, Network tab, the file cannot be loaded the second time. If I run a web server, the file can be loaded both times:
I ran into this exact problem on a project of my own today.
This behavior is an idiosyncrasy having to do with file permissions via FTP vs. HTTP. The solution is to run a local http server rather than using file:/// when working locally. Only under HTTP does the browser have permissions to read pixel transparency.
(#V.Volkov's comments on the original post give the solution, but I thought I would post the answer so that future users don't have to dig through the comments like I did.)
I can See the problem. usually for relative path for current directory we refer it as ./dir/file but for this case just omit . to become /dir/file this worked for me.
In other words use url("/dir/file") instead of url("./dir/file") once referring to local files in current directory in CSS.
When using url() to point to your local file, if its within the same project folder, you need to refer it relative to where the CSS is located.
background-image: url('./imagename.jpg'); // Image is within the same folder with the CSS
background-image: url('./../imagename.jpg'); // Image is located outside the folder where css is located.
background-image: url('./../image/imagename.jpg'); // Image is located in another folder relative to the css folder.
For retrieving image in folder inside computer (outside the project scope), you can use direct path to that path instead. Right click on the image --> Property --> Location to get the path to the image. Make sure you change the path's \ to / on the URL.
background-image: url('C:/Users/{user}/Downloads/{imagename}'); // Image is located inside the Downloads folder
My CSS and Image imports for spring boot project are not working. I am trying to figure it out from very long time but its simply not working, in some of my previous eclipse projects I remember i had no problems but recently I started working with intelliJ community version and i am not able to make it work.
Environment:
So in the above image I am trying to import css and image in my html login page, but i get following error:
Refused to apply style from
'http://localhost:63342/weather_api/templates/css/login-register-style.css'
because its MIME type ('text/html') is not a supported stylesheet MIME
type, and strict MIME checking is enabled. login.html:21
GET http://localhost:63342/images/face.png 404 (Not Found)
The problem is coming from two files marked by red in above image.
What I tried:
I also tried using Thymleaf tag to add css file but its also not working. However when i put these files directly in templates folder they all work fine. But i want to refactor my code and not mix all files in one folder.
Would be glad if someone can help me out of this. thank you.
EDIT
The static folder in the workspace i have manually created in by default created resource folder. Similarly the templates i manually created after project was generated, however all the files under templates are executed. the only problem exist is with contents under static folder
Remove the forward slashes in "css" and "image" src paths. (e.g - src="images/face.png")
I have the following code in my stylesheet:
body
{
margin: 1cm 3cm 1cm;
background-image:url("bg.png");
background-position:center top;
background-repeat:no-repeat;
}
But the background isn't found on the server. I have tested this code with just a basic html page and it does work, there must be something that isn't allowing it within the Phalcon framework.
Possibly the file location of the image? I have it in the same folder as the html file.
Yes, I believe that the location of your file is "changing", I mean, when you access a page in your Phalcon application, all your server side includes will take as the current directory the path of your main bootstrap file (the main index.php file path), and for client side the browser will always think that the action executed (like www.myapp.com/users/login-form/) is actually a existent directory structure on your server (so the browser will try the load your background in www.myapp.com/users/login-form/bg.png).
That's why Phalcon offers many ways to deliver html assets to solve not only this problem but also make your application future proof (what if you need to move all your images, CSS and JS to a CDN server?), and here it is:
You could either use an assets manager(more advanced) or simply a view helper which can produce all assets URLs needed based on your url service configurations. Your application should have a valid URLs configuration by setting the desired base URI (for URLs that leads to Phalcon controllers) and your desired static URI (for URLs that leads to CSS files, images, etc), more info about this can be found here.