The server consists of spring and nginx. Front-end is React.
All images send well from the server, but only two images send as text/html, so they are not displayed on the browser.
Even when I enter the server and do file myimg.png, appears well.
myimg.png: PNG image data, 390 x 80, 8-bit/color RGBA, non-interlaced
What should I do in this case?
Try 1
<a href="#" className="my_btn" role="button">
<img src={require("../../img/myimg.png")} alt="This is myimg" />
</a>
Try 2
<a href="#" className="my_btn" role="button">
<img src="" alt="This is myimg" />
</a>
.my_btn img {
content: url("../img/myimg.png");
}
Please help me smart friends 😇...
Related
I am making a portfolio page, which is going fine, except the uploading project link. This is the code I am working on (it's a free online template so cannot change much of the code)
<article class="from-left">
<a href="images/fulls/01.jpg" class="image fit">
<img src="images/thumbs/01.jpg" title="Superstore project" alt="" />
</a>
</article>
The issue is that when I replace the image with a link to a github page, nothing happens and the webpage goes into a loop type waiting image.
<article class="from-left">
<a href="www.google.com" class="image fit">
<img src="images/thumbs/01.jpg" title="Superstore project" alt="" />
</a>
</article>
My HTML and CSS skills are very basic level, not sure what is the issue. What I want is that when I click a picture it opens up the link provided. Below is the free html template I am using
https://html5up.net/big-picture
I've read your template readme file and understood what is happening. The problem is that the template uses a component called "jquery.poptrox". This component makes the gallery links to open a popup with that picture.
To do what you want, find the file "main.js". Then look for $gallery.poptrox
You have to comment this entire block. It will be like this:
//$gallery.poptrox({
// baseZIndex: 10001,
// useBodyOverflow: false,
// usePopupEasyClose: false,
// overlayColor: '#1f2328',
// overlayOpacity: 0.65,
// usePopupDefaultStyling: false,
// usePopupCaption: true,
// popupLoaderText: '',
// windowMargin: 50,
// usePopupNav: true
//});
Notice that I put a double slash to comment each line. This should disable that component and your links now will open what you want instead of opening a popup. You can also delete this block of code, but I don't know if you would like the original behaviour back in the future. So, it's up to you.
Important:
Your links should start with "https://". So, it'll be like this:
<article class="from-left">
<a href="https://www.google.com" class="image fit">
<img src="images/thumbs/01.jpg" title="The Anonymous Red" alt="" />
</a>
</article>
If you want your link to open in a new tab of the browser, add the target="_blank" attribute.
<article class="from-left">
<a href="https://www.google.com" target="_blank" class="image fit">
<img src="images/thumbs/01.jpg" title="The Anonymous Red" alt="" />
</a>
</article>
Try changing "www.google.com" to "https://www.google.com", right now the link may be sending you to [your website]/www.google.com
You can add https:// in URL and target="_blank" so that the link will open in a new tab.
<article class="from-left">
<a href="https://www.google.com" target="_blank" class="image fit">
<img src="images/thumbs/01.jpg" title="Superstore project" alt="Sample Image" />
</a>
</article>
Here is link of JSBin
I've added a page link to a picture for my website, but it does not load the website because the link goes the directory therefore the webpages do not appear. My code is below:
<a href="www.w3schools.com">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
When I click on the image it says file not found.
If you're linking to a page on an external site, you will need to provide the entire URL of the page in question, which includes the protocol. In this instance, that would be http://www.w3schools.com/.
By linking to www.w3schools.com, you are telling the browser to load that URL relative to the page you're linking from so, if this link were on a page located at http://domain.tld/page.html, clicking on it would attempt to load http://domain.tld/www.w3schools.com.
Add http:// OR https:// for your website link:
<a href="http://www.w3schools.com/">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
<a href="http://www.w3schools.com" target="_blank">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
Without the http:// your link will be something like: youraddress/www.w3schools.com
And pay attention if you image is in the correct folder called Images
I am having a problem referencing an image I have on a server in my temp folder. I have the following:
<a href="#" title="Hello">
<img width="220" height="255" src="file://myServerName/c$/temp/myImage.jpeg" class="attachment-hp-thumb wp-post-image" alt="Hello" />
</a>
This is currently giving me a blank screen, no errors. Can someone please give me some pointers on what I am doing wrong?
I have problem with Google translate urls... On my website I put 3 linked flags - one in my language, others in english and german. Strukture of my flags:
<div class="language">
<img src="img/pl.png" alt="" />
<img src="img/en.png" alt="" />
<img src="img/de.png" alt="" />
</div>
When I translate website first time - everything is OK. But when I click flag on "translated" website Google wants to translate url from href, not my url... And I get error "URL is invalid"... Any solutions?
I would be glad for help! Thanks!
I have a site where I am showing 8/9 images in a row. In the build phase it is ok to make 9 http call in my local pc but I want to go for css-sprite technique to reduce no of http calls in the actual website. But I am unable to produce such css-sprite. Please help.
The html+css code is simple:
<style>
a img{ width: 32px; height: 32px; }
</style>
<a href="http://www.twitter.com/godhulii">
<img alt="#godhulii"
src="twitter.jpg" title="follow me #godhulii"> </a>
<a href="http://somewhereinblog.net/blog/seoul">
<img alt="somewhereinblog.net/blog/seoul"
src="somewhereinblog.jpg" title="somewhereinblog.net/blog/seoul"> </a>
<a href="http://www.youtube.com/seoulbuet" >
<img alt="bookmark this site"
src="youtube.gif" title="youtube.com/user/seoulbuet"> </a>
For your convenience (or expecting you will create a css-sprite), I have setup this code in jsbin testing environment: http://jsbin.com/ugabez/edit#source
Thanks for the reply,
-seoul.
SpritMe can help you create sprites for your website.
You can find more information HERE