I have put a link to my image but I cant seem to get it to display in my webpage.
I have also tried to put the image in a separate folder but I still couldn't get it to display.
Any help would be much appreciated.
I have attached a photo to show my folder structure
enter image description here
<div class="carousel-inner">
<div class="carousel-item active"
style="background-image: url(./bball.jpg); ">
<div calss="container">
<h1>Example Headline</h1>
<p>
nionsdof nlsdfn klnsdf nsdklfnklsnfd kln
sl;df ;lkfsmdlmsdl;ksm dl;m klms lksfkj sjh
skdf jsdkjfn kn kjnsdf kjnsdkn sdfjk nksdf kj
s fdkjsdfk jnskdj nskdjnf jknfsdkjnskjdnf ks
</p>
<a href="#" class="btn btn-lg btn-primary">
Sign up today
</a>
</div>
</div>
remove the styling image line you made:
style="background-image: url(./bball.jpg);
In your css file, insert this:
carousel-item active.image {
content:url("bball.jpg");
}
or
div.carousel-item active{
background-image:url("bball.jpg");
}
Related
import React from "react";
export default function PromoBanner() {
return (
<section className="container mt-4 mb-grid-gutter">
<div className="bg-faded-info rounded-3 py-4">
<div className="row align-items-center">
<div className="col-md-5">
<div className="px-4 pe-sm-0 ps-sm-5">
<span className="badge bg-danger">Limitli Süre</span>
<h3 className="mt-4 mb-1 text-body fw-light">Small Title</h3>
<h2 className="mb-1">En Son Teknoloji</h2>
<p className="h5 text-body fw-light">
product Title
</p>
<a className="btn btn-accent" href="#">
Btn Text
<i className="ci-arrow-right fs-ms ms-1" />
</a>
</div>
</div>
<div className="col-md-7 d-flex align-items-center justify-content-center">
<img
src="/general/01.png"
alt="Güç Kontrol"
className="PromoBannerImage"
/>
</div>
</div>
</div>
</section>
);
}
Here is my sample comp. When ı export my project the image does not show how can ı solve this problem ?
Here is my jsconfig.json file. With this the css files is uploading but not images uploading when ı check the browser's Network developer tab ı can not see any images.
{
"compilerOptions": {
"baseUrl": "."
}
}
This is my file structure.
This is out file.
This is the root files.
This is my Public folder.
This is in out file index.html
When I add a dot like "./general/01.png" the image show and again give an error ı mean When ı refresh my browser the images show just 1 second after that the images does not show.
I'm working with a project in Blazor.
I'm using a component called "BlazorWheelZoom" (https://github.com/iso8859/BlazorWheelZoom)
This is my first page:
#page "/"
#page "/print"
#using Blazorise
#using LabelPrint.Shared
#using Linak.LabelPrint.Client.Shared.Components
<h3>Print</h3>
<div class="container-lg">
<div class="row">
<div class="d-flex justify-content-center">
<div style="border: thin solid green; width: 510px; height: 510px; padding: 5px;">
<WheelZoom Image="/Img/rotate0.png" width="500" height="500" />
</div>
</div>
.... and so on
For this HTML as you can see above, I get the following output:
The image refuses to move to the left, just as expected. If i zoom in a little bit I can move it a few pixels corresponding to the difference (the part of the image that you cannot see) and then it stops.
See the demo of the creator: https://blazorwheelzoom.azurewebsites.net
But when I add the exact same code to a popup Modal, I can keep moving it to the left.
I have the exact same HTML and CSS, so it must be something with the parent I guess. But I have tried to disable/enable stuff, but without luck. I just want the image to be prevented from moving "out of bounds" if you know what I mean.
This is the HTML in my Modal:
<Modal #ref="LabelPreview">
<ModalContent Centered="true" Size="ModalSize.Large">
<ModalHeader>
<ModalTitle>Show</ModalTitle>
<CloseButton />
</ModalHeader>
<nav class="navbar navbar-light bg-light">
<Button #onclick="() => RotateImage(true)">
<i class="fas fa-redo"></i>
</Button>
<Button #onclick="() => RotateImage(false)">
<i class="fas fa-undo"></i>
</Button>
</nav>
<ModalBody>
<div class="d-flex justify-content-center">
<div class="#($"{rotationClass} frame")">
<WheelZoom Image="#(rotate0)" width="500" height="500" />
</div>
</div>
</ModalBody>
<ModalFooter>
<Button Color="Color.Secondary" Clicked="#DownloadImage">Download</Button>
<Button Color="Color.Primary" Clicked="#HidePreviewModal">OK</Button>
</ModalFooter>
</ModalContent>
The Modal component I'm using is from Blazorise
This gotta be some CSS thing, but I'm about to give up. So hopefully some of you guys can help me.
I'm setting up a User Interface using a simple database and angular, where users can post a message, either with only a message, or with a picture attached to the message.
By doing some research, I found out about the built in ngIf conditions, where you can display variables if the variable doesn't hold a null value.
Here is my code and the output:
<div ng-repeat="m in chatDetailsCtrl.messageList">
<!-- This card prodives space for the message and Like/dislike buttons -->
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content">
<!-- Card Title is the person who wrote the message -->
<span class="card-title">{{m.user_ID}}</span>
<!-- Here comes the message text -->
<p> {{m.post_msg}}
<div> <span class="new badge light-blue">{{m.post_date}}</span></div>
<p *ngIf="m.photo_url">
<img src="{{m.photo_url}}" width="100" height="100">
</p>
{{m.post_date|date("m/d/Y")}} -->
</p>
<td><a class="waves-effect light blue lighten-1 btn-small" ng-click="chatDetailsCtrl.postDetails(m.post_ID)">Post Details</a></td>
</div>
<div class="card-action">
<a class="btn-floating btn-small waves-effect waves-light blue" ><i class="material-icons">thumb_up
</i></a> <span ng-bind= "m.likes"> </span>
<a class="btn-floating btn-small waves-effect waves-light blue"><i class="material-icons">thumb_down
</i></a><span ng-bind="m.dislikes"> </span>
</div>
</div>
</div>
</div>
</div>
I want to see if m.post_url contains a value. When null, I want to skip adding this variable to my website.
For example, last post, without a picture, I want it to look like this:
Sorry for my bad english, english is not my first language.
first of all, you are mixing angularJs syntax with new angular.
if you are using angularjs use ng-if in your image tag. it works properly.
as I can see you are using ng-repeat and ng-bind you are using angularjs and not angular.
so in your image tag use
<p ng-if="m.photo_url">
<img src="{{m.photo_url}}" width="100" height="100">
</p>
I'm trying to set up an anchor link for my site to jump to a particular heading on the same page. Below is my current code, but when you select the link nothing happens. Any help would be great, thanks!
Section I want the link to jump to
<div class="heading1">
<h2 style="margin-bottom:-5px;font-size:40px;"><a id="#work"></a>content</h2>
<p style="font-size: 26px;">content</p>
</div>
Link
<div class="contact mobile">
<a href=“#work”>Work</a>
</div>
need to refer the href to the id of the div you want to jump to href="#jump"
<div class="heading1" id="jump">
<h2 style="margin-bottom:-5px;font-size:40px;">content</h2>
<p style="font-size: 26px;">content</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="contact mobile">
Work
</div>
brother remove hash from attribute id="#work" use just id="work">
I have wracked my brain and can not find the reason this is happening. I have some links in one div that are mailto which work fine. But P tags and an image in a div in the next column seem to be inheriting the mailto.
I am using bootstrap. Has anyone come across this before? Can anyone see something I am missing?
Top of container with affected code:
<div class="row rowSettings col-sm-12">
<div class="col-sm-3 text-left sidepanel">
Some divs, then this div with the mailto links:
<li class="leftSubNavLinks"><a class="sublinks" href="mailto:email#domain.com?subject=message subject&body=prepopulated message" target="_blank"Contact</li>
and the following div that is inheriting the mailto:
<div class="col-sm-9 text-left">
<div class="col-sm-8 titleContainer">
<img src="url/image.svg" alt="">
</div>
<div class="col-sm-4 titleContainer">
<h1 class="mainTitle"> Title text</h1>
</div>
</div>
<div class="col-sm-9 clearfix">
<p class="bodyCopy" id="body-text">some text here</p>
</div>
You haven't closed your <a>
<li class="leftSubNavLinks">
<a class="sublinks" href="mailto:email#domain.com?subject=message subject&body=prepopulated message" target="_blank">Contact</a>
</li>
You aren't closing your <a> tag
<li class="leftSubNavLinks">
<a class="sublinks" href="mailto:email#domain.com?subject=message subject&body=prepopulated message" target="_blank"Contact
</li>
Should be:
<li class="leftSubNavLinks">
<a class="sublinks" href="mailto:email#domain.com?subject=message subject&body=prepopulated message" target="_blank">Contact</a>
</li>
The browser will try to "fix" your broken code by closing the tag where it thinks it should be closed. This is almost certainly not where it should be closed which is why your following HTML is being bundled up into the <a>.