i am trying to modify during runtime an image in my application, this image is located inside assets folder, so thats why i dissable -use-network=false flag, then i call something like this:
img.source="../assets/pict.png";
but it's not working.
i know its a silly question but i am stuck here. any hint i appreciate.
Br
I don't think you need the ".." all of my images are in my "img" folder and I call them with "/img/image.png"
Related
The below is my piece of code, I am not able to add background-image in my web page, can anyone tell me where I am going wrong?
enter image description here
Create folder called 'images' near your class_id.html file are located and Copy "Aravind_Signature.jpg" image to the newly created image folder
and then change the css background-image property as below
background-image:url("images/Aravind_Signature.jpg");
Note : its bad approach for referring image files path starting from drive names like "c:\". Because when you share your code you need change image path always.
There is nothing wrong, you just need to look at referring to path this way...
either use '/' or '\' so that you will get the right path.
I started to work with mautic (open source email marketing automation).
Im trying to build a template for a landing page and therefore I'm editing "*.html.twig" files. At least I could find out that twig is a PHP engine by Symfony. What I could not find out yet though is something actually totally simple, at least in css/html.
All I want to do is specify the correct file path to an image file as a background-image:url(''); within the style attribute of the body tag. (See example below)
How on earth is this twig working with file paths? It seems to automatically change the file path I specify, but in a way that is not comprehensible to me.
I tried several options, but the only thing that works at least partially is specifying the absolute path. As soon as I start using the template in mautic though and build a page from it and save it, even the absolute file-path gets 'crashed' on the output source code. What the heck?
I did not find much info on file path syntax in twig. What I found sounded so horribly complicated that I can't believe it should really be that complicated to simply put in a file path? Am I wrong?
Here is the example, specifying the absolute path in the actual source code.
<body style="background-image:url('http://sawiya.de/mautic/themes/mautictheme1/img/background.jpg'); background-color:#213E4C;">
When viewing the result in the browser, without adding content to the landing page template, the source code output is the following (path changed, but the result is at least that the image is being shown):
background-image:url(http://1.1.1.2/bmi/1.1.1.5/bmi/sawiya.de/mautic/themes/mautictheme1/img/background.jpg);
After adding content on top of the template in mautic, the file path is being changed even more and reads the following from the source code output (now the background image does not get displayed anymore, so its clearly broken):
background-image: url(http://1.1.1.3/bmi/sawiya.de/mautic/"http://1.1.1.5/bmi/sawiya.de/mautic/themes/mautictheme1/img/background.jpg")
What is this all about? Where can I get the info on how to easily and correctly specify the file path? Is it really that hard?
Ok, now I found out something strange. It might be a bug in mautic here.
When I open the page where I specified the image via the background-image:url() through the https:// -Protocol, instead of http://, it works!
And the resulting source code looks as expected:
background-image: url("http://1.1.1.5/bmi/sawiya.de/mautic/themes/mautictheme1/img/background.jpg")
So, wrong adress here, I think. At least to solve the bug. Hope someone finds this as a solution, until the bug is fixed.
Cheers!
Edit: Of course its better to specify the file path in a relative way, so that when the theme is used on another server, the path is still correct. In twig the best way to do that seems to be this. At least it works perfectly well.
background-image: url('{{ getAssetUrl('themes/'~template~'/img/logo.png', null, null, true) }}';)
Good day.
My structure is like this:
/
index.html
style/
main.css
images/
test/
test.html
/style/main.css says something like this:
body {
background-image: url('/images/SomeImage.png');
background-color: #000;
}
/index.html has a link to this CSS file, but, as the title says, no image will load. But it's connected though, cause the background is actually black, so the rest of the style (but images) does work.
Also, if I write the same style internally into /index.html the background will load.
Also, I created /test/test.html which says nothing but
<img src="/images/SomeImage.png" />
and the image is displayed on that page.
So, obviously, for some reason my /style/main.css can't reach files, that any other file from any other location reaches. Why does this happen? There's clearly nothing wrong with the syntax. I'm lost.
add ../ to the beginning of /images so it read ../images/imagename.jpg
Here's what your code should be:
body {
background-image: url('../images/SomeImage.png');
background-color: #000;
}
Because your image is in another folder (thats a level up than your style sheet), you need to start with "../" for a level up folder in hierarchy relative to the style sheet. So you need a relative URL:
background-image: url('../images/SomeImage.png');
Try to copy webpage, css and example image in one folder temporarily. Then use only image name for url a see what happens. If it works, it will be the image path, if not something else.. possibly position.. is this complete css you are posting?
Initially, it looks like your code is fine.
So how do you know the image isn't loading? Look in your browser's developer tools to see if the image is loading, or returning an error, or not even being referenced. My guess here would be that it is loading, but not display because of something in your CSS.
if you are in /styles/style.css you need to add:
../ 2 levels back to get to the root folder.
So as Rokin answered :
background-image: url('../images/SomeImage.png');
is the way to do it.
To link your CSS within your index file use the following:
<link href="./style/style.css" rel='stylesheet' type='text/css'>
./ 1 level back within the index.html to reach the root folder.
In addition your problem might also be a file permission problem, I always face this issue when i download images from my email and use them directly.
If you are working locally on a mac:
- Right click on the selected image
- click on **get info**
- In sharing and permissions, make sure that the **everyone** has the **Read only** permission instead of **No access**
If you are working directly on a live server:
- login using FTP (with any ftp client such as File Zilla)
- Go to the selected image
- Right click and select file permissions
- set permissions to : **664**
Ok, so basically, I replaced the not-working /style/main.css with the copy of it (test.css - described in post comments) and now it works. Why is still the question, but the problem is kinda solved I guess.
Same with me, I guess images that used in css must be in the same folder as css file. I tried every possible solution while checking with the browser tool and the only thing that works is when I put the image and stylesheet in the same folder.
I am having the same problem. Working with Visual Studio Community.
I went inspect elements in browser and found that the file directory "automatically" (i did not set it this way) says that my image folder is nested inside my css folder. dont know why yet... so I then went and moved my image folder into my css folder seeing that this is what my browser showed me in the dev tools...
so maybe for some reason when working with css your images inside your image folder should be located in your css folder and not the complete Webpage Folder..it worked.
The answer is probably going to make me bang my head on the keyboard, but for the life of me I can't seem to figure out how to reference a template file so that I can load it from a handlebars view.
Let's say the view is 'ROOT/views/intro/home.html'. In it I want to reference an external CSS file called style.css.
Let's say that this external CSS file is located at 'ROOT/assets/css/style.css'.
How would I reference this file in the view in the <link ref=""></link> tag? I have tried everything from
'../../assets/css/style.css' to
'../assets/css/style.css' to
even appending localhost to the front and referencing
'localhost/assets/css/style.css'.
Thank you in advance!
Figured it out! For anyone else having this problem, you have to declare the static path for public files in the middleware, using something like koa-static and opening up that folder for access like:
_app.use(serve(__dirname + '/public/'));
Hope this saves someone a lot of time! It definitely was a trip trying to figure this one out.
I am new to web design and I think I need to convert a jpeg into a url. I have an image saved locally on my computer. An example website that I am using as a reference has a one page for their html/source code and a different page for their css. All of the images are listed under the css page, however, they are typed in as a url. For example url(..green sea.jpeg) When I try to replace their css code with my image, it can't be found. I know I'm new, so I figure I must be making a simple simple mistake, but everytime I try and look it up online, I find directions on how to convert a jpeg into a url and it looks like you need another kind of software to do this, but I'm not exactly sure. Any help/direction would be very much appreciated!
Thanks!
When you replace your image name for the one you see in the CSS:
url(..green sea.jpeg)
...make sure that the image you are wanting to use is in the same location (folder / place) as the green sea image.
So if I want to replace it:
url(..myNewimage.jpeg)
I would make sure it was in the same place as the image I'm replacing it with.
ALSO, I just noticed that your path is wrong. You have ".." when it should probably be "../".
So try this:
url(../green sea.jpeg)
The url you need for your code is just wherever you have posted the image on your server in relationship to the css file. For example, if your directory is structured like this:
/CSS
-style.css
/JS
/images
-green-sea.jpg
index.html
Then your url would be (../images/green-sea.jpg)