I am attempting to use imported images in my .Net Project. I have placed the images in the images folder and they all have a plus sign and say "Pending add" next to them.
I'm not sure if this is the error or how I am referencing the images. I reference the image using the following code.
<img class="block" id="u730_img" src="Images/green9-crop-u730.jpg?crc=200722682" alt="" width="1529" height="659"/>
The image name is correct, but I'm not sure if that is the appropriate path. My folder structure is below. The file being used is LoginBody.cshtml and the image is in the images folder.
I suspect that you're using ASP.NET Core, and in newer version static files under wwwroot folder are served.
Move your images to wwwroot > images
and change your path:
<img class="block" id="u730_img" src="~/Images/green9-crop-u730.jpg?crc=200722682" alt="" width="1529" height="659"/>
Hope this helps !
Related
I am trying for two days to resolve the images not appearing issue on Github pages. I searched and applied all the ways.
Please guide me step by step and if possible with a screenshot. the answer with ../ is not working. I am confused about where to put it. should I edit the indes.html file inside the repository file or just edit in the local file on the desktop and then upload it. my spelling and case are also correct.
here is the link to the repository
https://github.com/biqrar/Responsive-QR-Code-card.git
What I see is that the image file is in the same path of index.
so the path for source of image should be only file name
<img src="image-qr-code.png"
class="card-img-top mt-2 px-2 py-2 mb-2"
alt="QR-code"
/>
Perhaps I misunderstand your question, but is it as simple as the path to your image is wrong? Within your repository the qr png image and your webpage reside in the same folder. So changing line 32 of index.html to src="image-qr-code.png" makes it display.
I just want to insert a picture into a asp.net page and this is how I proceeded ...
in the project i created an image folder and inserted the image there. in the html I use the img tag and enter the path to the image as src. In the browser I see that there should be a picture but it is not displayed. not even with the absolute path
Folder Structure....
<img src="\Images\file_example_PNG_500kB.png" />
Move the Images folder inside the wwwroot folder - that's where all static files are served from.
You should then be able to use an app-relative URL for the image:
<img src="~/Images/file_example_PNG_500kB.png" />
I creating new website using Umbraco(version 6.1.1 with razor) and I am new to Umbraco. My settings panel is like this.
In my Master template I am using my css styling and JavaScripts are like this. And their paths are ok.
<link rel="stylesheet" href="/css/mobile.css"/>
<script src="/scripts/jquery-2.0.2.js"></script>
CSS and scripts path are working. So that's ok.
Now my problem is I want images for my site. I don't know where to put images and what should be the path.
For example:
I tried to upload pictures to Media
In my Master template I tried
<img src="/media/A.jpg" alt="Smiley face" height="42" width="42">
<img src="/media/images/A.jpg" alt="Smiley face" height="42" width="42">
Also in the CSS file
background-image:url('/media/images/A.jpg');
But these are not working. I just trialing them. Actually I don't know the correct way of doing it :(
So where should I store images in Umbraco and how should I locate the path in CSS files and template files ?
Please help!
Thanks in Advance ....
Items stored in the media section will have a path like:
/media/<row_id>/filename.ext
Where <row_id> is literally the id of the row in the database where the media item's information is stored.
One way you can determine the path of the media item is to click on the thumbnail (if it's an image) and copy what is in the address bar.
You can also access the file by id via a macro using xslt or razor. Here's a razor example:
#{
int imageId = 1069;
var media = Library.MediaById(imageId);
<img src="#media.umbracoFile" alt="" />
}
However, this is a content management system, and you will no doubt have end-users managing the content and, therefore, it wouldn't make sense to place design specific images in the media section. A more full-proof approach would be to simply place them in an images folder in the root of your site and use them from there.
Should be as simple as this on your css:
.style { background-image: url(/media/1006530/A.jpg); }
The path you get from the media url with row id (e.g.1006530) in it
I have installed a diazo theme for my Plone site. Now I need to change the default logo that is being used. In another question I was instructed to look at the rules.xml and index.html files that come in the theme's directory and to figure out how to change the logo by editing one of those files manually. However, I cannot figure out how to do this. These appear to be the relevant lines from my index.html file:
<div id="portal-header">
<div id="portal-slogan">
<span class="heightImmitator"></span><span>Free Theme for Plone</span>
</div>
<a id="portal-logo" title="Site1" href="/"><span class="heightImmitator"></span><img src="images/logoSchools.gif" alt="" title="" height="71" width="402"></a>
<div id="portal-personaltools-wrapper">
<h5 class="hiddenStructure">Personal tools</h5>
<dl class="actionMenu deactivated" id="portal-personaltools">
<dt id="anon-personalbar"><a style="cursor: pointer;" class="link-overlay" rel="#pb_1" href="/login" id="personaltools-login">Log in</a></dt>
</dl>
</div>
</div>
And these appear to be the relevant lines from my rules.xml file:
<copy css:theme="#portal-logo" css:content="#portal-logo" attributes="href"/>
<copy css:theme="#portal-logo" css:content="#portal-logo" attributes="title"/>
<replace css:content="#portal-logo img" css:theme="#portal-logo img" />
I guess that the "replace" line is telling the theme to replace one logo with another. However, it is not intuitive to me how I should edit these files to find the logo that I have uploaded. Incidentally, the image file that I have uploaded is called nav-home1.png and it is sitting in a directory called site-images which is in my home directory.
If I were you (and taking my comment about where to do this above into account), I'd simply remove the <replace /> rule that's trying to pull Plone's logo in from the content and then edit your index.html to reference your image file directly (at this point, it's all just plain HTML).
Incidentally, you may benefit from reading a bit more about the Diazo rules and what they do, on http://diazo.org/. For a heads-up (even if textual) of what the in-Plone experience will be in Plone 4.3, see http://pypi.python.org/pypi/plone.app.theming.
Martin
My solution was to place my image file in the ~/Plone/buildout-cache/eggs/quintagroup.theme.schools-6.0.10-py2.7.egg/quintagroup/theme/schools/static/images directory and then comment out the line in rules.xml that tells index.html to replace the image, and then edit index.html so that it loaded my image instead of logoSchools.gif, which was previously indicated. This did the trick, but now my problem is that the theme is getting the sizing information from somewhere else, so the image is far too big. Adjusting the height and width attributes in index.html have no effect.
I would suggest getting the static theme files provided by the theme egg. Then editing and packaging it as a zipped file (Use as guide -> http://pypi.python.org/pypi/plone.app.theming/1.0#packaging-themes). Then you can upload it from the Diazo control panel.
If you want to manipulate the zipped files within Plone, you can go to portal_resources in the ZMI and edit the files there. If you want to distribute the edited files, download it from the Diazo panel.
This is a bit of work for now, but the experience should dramatically change in Plone 4.3 as suggested by optilude.
For help in understanding Xpath, use: http://www.w3schools.com/xpath/default.asp Spend some time on the tutorials. It is really simple to understand.
I uploaded my logo image to the FS. I've got a develop-egg in {ZEOHOME}/src/
So, the image shows up like this:
/usr/local/Plone/zeocluster/src/quintagroup.theme.sunrain/quintagroup/theme/sunrain/static/images/theme_rain/PF-Sig.png
(See buildout tutorial for how to add a develop egg...)
In the theme's ..theme/sunrain/static/index.html file, use a direct reference like this:
<img src="/++theme++quintagroup.theme.sunrain/images/theme_rain/PF-Sig.png" alt="" title="PF Sig Logo" height="150" width="300"/>
The sizing info is right there in the <img.. /> tag.
However, it seems to be important, after making any changes, to go to Plone's Theme Control Panel, and deactivate/reactivate the theme, so that it will re-process the Rules.
I have spent the past six hours trying to change the logo in a fresh Plone 4.2 (OK, I'm a bit rusty!)
Quintagroup just tells me to customize logo.png in the ZMI, but that seems so... 2002 ;-) I spent hours yesterday trying to use the 4.3 theme-TTW feature, only to find that SunRain seems to break when I create a TTW copy.
Since this seems to be a top user request, why is it still so absurdly hard to figure out?
Should this not be a simple "Upload your new Logo Image" in the Themes Control Panel?
In my webapp, I have a folder Views. In this folder several .aspx pages live. I don't use the rendered contents directly in the webapp, rather I request the contents using ajax in a main aspx page on the root of the webapp.
Now when I refer to an image, "images/image.png" will work since the image reference lives in the aspx page on the root. When I change this to "/images/image.png", this won't work since the root is determined by the virtual IIS folder.
How can I have a clean reference e.g. "/images/image.png"?
Firstly and probably most elegant, make the element run at the server and use the root-reletive url:
<img src="~/images/image.png" alt="image" runat="server" />
This will automatically translate your src-value into a path which will resolve from your current location. However, there is one caveat. If you do it on pages which are included, asp.net may create an incorrect value here, as it could be morphed into
<img src="../images/image.png" alt="image" />
if you are a directory down. So if you include this result in a page in the application root folder, your value may not be correct. I have not seen a good way to work around this. It will, however, show you a warning if the file doesn't exist.
Alternatively, you may want to manually set the root path for such pages:
<img src="<%=Request.ApplicationPath %>/images/image.png" alt="image" />
which will transform into a path always coming from the root of the site:
<img src="/AppPath/images/image.png" alt="image" />
Obviously, this is a bit more verbose. Additionally, you will not be able to see any warnings if the referenced file does not exist, as it will be dynamically built.