Image URL that does not end with .jpg not display in React? - html

I have an image URL like this: https://static.wikia.nocookie.net/witcher/images/8/86/Tw3-abelard.jpg/revision/latest?cb=20171014085335&format=original
When I tried to put that into the src of the img in React the image didn't display. It showed after I deleted all the part after the .jpg but the image is so blurry.
Any help on what I am supposed to do to display image from Wikia without modifying my own CSS?

.jpg files do not scale. If the default size of the picture.jpg is 10x10 and you try to scale it to 100x100, then it will go blurry as you described. If you want a scalable picture, use .svg files instead.

Related

is it possible to make a link in a image clickable(.png or .jpeg file)

Is it possible to make a link or text in a image file clickable?
I am referring to the text in a image file like .png or .jpeg files and not a html page where text is over the image.
if it is please share some references. if not why?
Shorthand, no you can't. Why? Because the text on an image is part of the image, you can reference the image itself, but not the text.

Image broken - how do I display using HTML and Filezilla

I need help. I am VERY new to learning HTML. I created a very basic / practice HTML file; this is all I have learned so far. I want to display an image but the image will not display. I am using FileZilla to upload my webpage. On my desktop I have my project folder with my index file inside and another folder called images. I uploaded this to FileZilla and uploaded again there. Not working; need help! I really need simple precise answers as I am very very new. Thank you!
Below is my desktop, Filezilla, my html and my page
My desktop folder
Filezilla
My HTML
My Webpage
You need to find the position you want to place the image in the index file. Then you can use the image tag. As the image is in a subfolder that's why you need to write the image tag like this
<img src="/images/example.jpg" alt="Testing" width="600" height="400">
Here you can remove the height and width if you want also reshape the image size by changing height and width

Adding an image to HTML

I'm trying to add an image, but it only shows up as a corrupted or unloaded image(I'm not sure what to call it, it's a tiny picture of a broken picture..? lol) here is my code....
<img src="funny_alien_01.jpg05e9a40c-bb67-46e2-a106-ac097b47bd28Original.jpg">
I've tried this with an image from placeholder and that works fine, I'm wondering how to use an image off of google images or an image saved to my PC. Thanks.
Check you image source link
Give a readable image name. Like: 1.jpg or 1.png
The path to the image in your example looks invalid.
To display an image from the web, you’ll need to use an absolute path:
<img src="https://www.example.com/images/dinosaur.jpg">
Notice how the path starts with https://
Check out this resource on how to use the image tag for displaying images from the web, or from your computer:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML

Background image url is not showing the image

I have designed an html css theme. It is not running on any server or localhost. I kept the theme including all its css js files in one directory. Its path is D -> website -> theme.
In the html file I used several images. My html code for image is
`<img src="images/share.png" class="image-gap">`
This code perfectly show image on the html page. I also need to show a background image and I used this html code
<div class="background-image-holder">
Only some text here. Background of this text should be a small image
<div>
CSS for above html
.background-image-holder{
background-image: url('images/share.png');
}
Image perfectly show on html page but same image path and image do not show as background image. When I hover over the firebug css background-image it show this message
Failed to load the given url
how can I show this image as background image. And why my present approach is not working? BTW I found some questions on this website but answers are not working for me.
CSS url() are relative to the location of the .css file, not the html file that's loading that css. e.g. If your file is /index.html, and it's loading /css/styles.css, then the background image is going to be accessed as /css/images/share.png
I think code should be like -
.background-image-holder{
background-image: url('../images/share.png');
}

Setting a non-image as MediaWiki wiki logo

How can I use .swf file as my logo ? I found out that in LocalSettings.php
$wgLogo= "$wgStylePath/common/images/wiki.png";
I can change my logo through this line , but it only supports images , how can I use .swf or .fla file instead of an image ?
The logo should always be an image, it might be shown in various locations. Create a png version of your swf file if possible.
The logo shown in the top left (at least in Monobook and Vector skin) is by default an anchor element (with a link towards the main page), with the logo file set as a background image. If you want to replace it with something different, you will need to edit the skin template(s). In monobook, for example, it would be the code around line 125.