The images are referenced in a razor component that's defined in a Razor Class Library in the "wwwroot/Images" folder.
I've included a project reference to this Razor Class Library in my Blazor Maui Client App.
The problem I'm having is that the image is not showing up.
Initially I had it as:
<img src="../wwwroot/Images/CISA_Logo_183px.png" />
then I tried:
<img src="_content/CSETRazorClassLibrary/wwwroot/images/CISA_Logo_183px.png" />
and I'm not having any luck getting the image to display.
Is there something else I need to configure in the Blazor Maui app to make this work?
I'm using Visual Studio 2022 Preview Version 17.3.0 Preview 3.0 and I'm on a Windows 11 Pro Version 21H2
The src is wrong. _content/CSETRazorClassLibrary/ is the wwwroot folder of the RCL. So the path should be _content/CSETRazorClassLibrary/images/CISA_Logo_183px.png . Here is a test I ran up to illustrate the path resolution.
<img src="_content/RazorClassLibrary1/background.png" />
#page "/"
#using RazorClassLibrary1
<h1>Hello, world!</h1>
<Component1 />
Turns out after I updated Visual Studio I was able to get it to work. So it appears that the version I had was the reason I could not see the image.
Related
I have coded an html and css website in VS Code. Viewed the project in a web browser (Chrome), looks good. I am on a team and we have created a project using Razor Pages in Visual Studio 2019. I copied my VS Code to Visual Studio 2019 to the appropriate page, in this case WelcomePage.cshtml. When I went to view my Visual Studio 2019 page in a browser (Chrome), it didn't look the same. The styling was off. I have ensured the css and images are pointed to the correct folder. Ensured all my tags are in order. I also checked to see if the Layout.cshtml file and bootstrap.css files were interfering and it's not. I am still experiencing issues with how the page looks in VS Code when I view it in browser compared to what it looks like in Visual Studio 2019. I appreciate any advice and guidance you can share with me. Thank you.
I commented out the Layout.cshtml file and bootstrap.css file. Created a new project where I deleted the Layout.cshtml file, the bootstrap files and js files. Still had the same issue.
just wondering how to fix the img src = "" problem. Im using atom.io and i'm trying to display a .jpeg photo for my website i'm making.
That's a security feature that shouldn't be disabled. It's to stop pages from accessing your local file system and using the data present.
What you should do is install a development server:
Atom Live Server
Chrome Web Server Extension
And make sure that all your resources are in your project folder
--MyAwesomeWebsite
|-index.html
|-photos
|-pic1.jpg
That way your img tag would use relative addressing
<img src='../photos/pic1.jpg'>
Assuming the above image is loaded from index.html
You can switch to relative paths and load these images without issue. For example, rather than this:
<img src="file:///Users/[...]/birdie.jpeg" />
Switch to this:
<img src="birdie.jpeg" />
This works because birdie.jpeg appears to be in the same folder as your HTML file, index.html.
If you had your images in a sub-folder, you would still use a relative path:
<img src="photos/birdie.jpg" />
change
<img src="'../Photos/birde2.jpeg">
to
<img src="Photos/birde2.jpeg">
you have added extra "'"
I am trying to debug code that is inside HTML imports in webstorm? I am working on a polymer project and am trying to debug the web component declared in:
<link rel="import" href="core-collapse.html">
The breakpoints are hit fine in the loading page but no code is hit inside core-collapse.html.
WEB-10145 is fixed in WebStorm 9. Please try the EAP build
I am trying to figure out, how to set the app logo as well as the splashscreen using the preview for cordova apps (or Multi-Device Hybrid Apps) in Visual Studio 2013. I tried adding
<platform name="wp8">
<icon src="img/logo.png" width="99" height="99" />
<!-- tile image -->
<icon src="img/logo.png" width="159" height="159" />
</platform>
However this won't do the trick. It's a pretty new thing so finding informations on this topic is kind of hard. It was pretty easy, using the old method. Any help is appreciated.
Multi-Device Hybrid apps use the Cordova CLI to build for each platform, which provides a fallback by default, so you don't actually need to add a reference in your HTML files.
Instead, to set a logo (I assume you're talking about the icon that shows up in the app drawer), you need to add(or replace) the image in res/icons/wp8/ by following the resolution and naming guidelines mentioned in "Platform-specific Visual Assets" section of the docs.
Switch to wp8.1 emulator instead of wp8 emulator.
Windows Phone 8 :
I have an HTML design to bind in webbrowser control.
In that HTML I need to set the image() dynamically from my windows 8 phone application itself (Eg:MyApp/Images/Done.png).
How to set this Image in my HTML dynamically?
Could any one help me on that?
In terms of Zen, WP8 tried to align Uris as close as possible to Win8 Uris. So whenever you ask yourself "How do WP8 Uris work?" a good starting point would be Win8 and WP7 behaved. For example, you'll see lots of "ms-appx:///" and "ms-appdata:///" all around WP8.
Specfically, In order to access an app's Image resources from a WebBrowser just specify the local file path.For example, start a new WP8 project and in MainPage.xaml add:
<phone:WebBrowser Source="myPage.html" />
And create myPage.html and add:
<html>
<body>
<img src="Assets/AlignmentGrid.png"/>
</body>
</html>
This would render the correct image as part of the WebBrowser. See attached .