I'm new to JSF and can't figure out how to add the link for my image in my Navbar for Bootsfaces.
<b:container>
<b:navBar brandImg="WHAT_DO_I_PUT_HERE?"
id="navbar-main"
inverse="false"
sticky="true"
I've looked everywhere to try and figure out how to link the image inside of BrandImg and there isn't any information that I can find. I have my logo.png file stored in my resources -> images folder.
The brandImg is simply the URL of the image to display. It may be relative or absolute.
Currently, there's no support for images stored in the resources folder. Of course, you can always use an URL like "#{request.contextPath}/resources/images/logo.png".
Related
I'm trying to customize the CTA section with new images and the support documentation for Austin Night says you're supposed to customize images within the JSON files. I uploaded some images to the image manager but now I'm unsure of where to copy over the new image file within the coding - So I need help knowing where exactly I do this and what part of the image URL is supposed to copy over the default image text. Thanks!
I've uploaded images to the Image Manager and I've copied various parts of the image URL to replace the theme's default images, but nothing seems to work. I've been working within the en.JSON homepage file and I even tried to change the image within the OB Custom images file all in Stencil File Editor, since the theme documentation doesn't give much description on what to do exactly besides to customize in the JSON file.
My png image is located in src/AppBundle/Resources/public/img
I am trying to set png image through css content property:
content: url(../../public/assets/img/optional-checked.png);
But I am getting
GET http://127.0.0.1:8080/public/assets/img/optional-checked.png 404 (Not Found)
How can I set png image through CSS content property in Symfony project?
First suggestion, That's because you need to respect the hierarchy from where you call your CSS not your script.
Another suggestion would be not to use public folder to upload your assets, instead of this, use web folder (in the root), because if you do like I'm saying then the twig views can use properly asset keyword right.
And the last tip, is that you are trying to read your image from public/assets/img/optional-checked.png when you said that your image is really located in public/img.
Hope this helps.
Can anyone please help me. Am using adobe captivate 9. I have a content with image that exceeds the slide spacing, i want to set this content within the page using scroll. I have tried using text-scroll widget but i cant add images to it.
Put the image into an MS Word document and save it as an HTML web page. The result will be an HTML file and folder named "[file name]_files" in whichever folder you saved it to.
Select both the HTML file and the folder, right click, and choose Send to -> Compressed (zipped) folder in the context menu.
Dragging that ZIP folder directly onto your Captivate slide will create scrolling HTML Web Object based on the formatting of the MS Word file. It will show up in your Library in the "Web" folder.
Unfortunately, this is a feature that is missing from Captivate. The best solution I've found is to make an html file that includes the text and points to the image, then zip and import as an HTML5 Animation.
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.
These are the three ways in which the same image has been referenced to in my project in 2-3 different files:
url(<% =QDAAB.Constants.SiteURL %>images/Docs/Plan/myImage.jpg)
url(~/images/Docs/Plan/myImage.jpg);
url(../images/Docs/Plan/myImage.jpg);
I am a bit confused about this relative, absolute path thingy. How do I refer to this image in such a way that no matter in what folder the image is located it is always displayed and never lost. Which of the above three references ways is right to achieve what I want? Or is there another way too to refer to an image?
Hope the question is clear.
I am beginner to .NET and have just begun trying out stuff.
Also what exactly do the above code lines mean? Like, what's this Constants.URL? What are "~" and ".." doing?
Here's where the image is being used in one of the pages. When I changed it to "../.." the image got displayed, earlier it wasn't.
<td align="center" style="background-image: url(../../images/Docs/Plans/myImage.jpg);
None of these will 'magically' find your image no matter in what folder the image is located. You will always have to give it some part of the path to the image in your links to have that image rendered.
However, out of these three, I would recommend the second line url(~/images/Docs/Plan/myImage.jpg); as the best way to accomplish what you need to do.
The '~' in .NET is a special character for the framework that starts your path at the root of your site. It essentially says, no matter what directory the request came from within the site, go to the root and start your path from there.
The '../' is standard HTML syntax meaning go up one directory and then start looking for your path.
So for instance, let's say your site is located at www.domain.com. And here is your folder structure
Images
Docs
Plan
CSS
Admin
SomeFolder
SomeFolderSubFolder
Default.aspx (your default document when you get to your site)
Examples
If you are in default.aspx, then the hand-coded URL to your images would be (/Images/Docs/Plan/myImage.jpg) as you are at the root of your site at this point.
If you are in SomeFolder, then the hand-coded URL to your images would be (../Images/Docs/Plan/myImage.jpg) since you have to go up 1 directory to get to the root of your site where the Images directory is located.
If you are in SomeFolderSubFolder, then the hand-coded URL to your images would be (../../Images/Docs/Plan/myImage.jpg) - as you would need to go up 2 directories to get to root of your site where your images folder is.
Now, by using the url(~/images/Docs/Plan/myImage.jpg); method, you do not have to worry about knowing how many directories deep you are in your site, it will always start looking from the site root. Each one of those examples above replaced with this line of code will always render out the image correctly.
EDIT
Ok, so you are trying this with in-line styles. You might/should be able to do this:
<td align="center" style="background-image: url(<%= Server.MapPath("~/images/Docs/Plans/myImage.jpg") %>);></td>
Or, there is nothing wrong with using the ../ method, you just need to keep in mind where you are at in your folder structure. Lastly, if you were to declare this style in your stylesheet instead of inline, it doesn't matter where the images are at in relation to the page, just where they are at in relation to the stylesheet FYI.
<td align="center" class="tdWithImages"></td>
styles.css
#tdWithImages{background-image: url(../Images/Docs/Plan/myImage.jpg);}