I am trying to have a svg icon using the object tag. However, it does not display anything.
The SVG files is blank/transparent/white, and it does not seem that there are any data on it.
HTML
<div id="navbar-brand-cont">
<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
<object data="<?php bloginfo('stylesheet_directory'); ?>/img/logoo.svg" type="image/svg+xml">
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.png">
</object>
</a>
</div>
Adress: http://bit.ly/1LTSf5b
Export settings:
Any suggestions?
The referenced SVG file does not contain anything renderable i.e. it's got no shapes or text, just SVG font definitions.
The problem was solved by changing some of the code and exporting in a different way.
The image was blank/transparent/white because of a bug in Illustrator. The export problem was solved by doing the following:
Copy the file into a new document
Put everything on one layer
Export
In the code there was an issue with navbar-brand-cont and navbar-brand. This problem was solved by doing some minor changes.
Please, read about the SVG element in HTML and you can achieve it.
http://www.w3schools.com/svg/svg_inhtml.asp
If you include the SVG code it works. Also, read about Räphael that helps you to play with svg objects.
http://raphaeljs.com
Good luck!
Related
In Reactjs image sources seeming like src="[object Module]". But somehow .svg files not have this issue and it only occurs and some .png files even with the static ones. For example:
<div className="flex-row stores-main">
<a
href="https://play.google.com/store/apps/details?id=com.xxx"
target="_blank"
>
<img
alt="play-store"
className="play-store"
src={require("../../assets/stores/google-play-badge.png")}
/>
</a>
<a
href="https://apps.apple.com/tr/app/verified/xxx"
target="_blank"
>
<img
alt="apple-store"
className="apple-store"
src={require("../../assets/stores/apple-store-badge.png")}
/>
</a>
</div>
In here play-store image rendering normal but apple-store image is not rendering and i am sure that the paths are correct.
I'm not sure how did you load this template with webpack inside a html plugin or a via a loader but looks like require('thing') returns a module object which has default prop as a string path you need.
src={require("../../assets/stores/apple-store-badge.png").default}
I'm guessing you currently have enabled esModule object for a loader which is likely file-loader or url-loader causing the issue. If so, you just simply turn it off then it exports the right url for you (without exporting as a module)
Ok. I can't figure this out. Here's the HTML:
<html>
<body>
<img source="sample.jpg" alt="Wheres my image" style="width:100;height:38">
</body>
</html>
Pretty simple. The picture is just a simple block with some text in it. It's 2k in size. And for some reason I can't attach it here.
Both the image and the HTML are in the same sub directory in my Documents folder (Win10 x64 pro).
When I load the HTML, I just get the text from the "alt" setting for the image.
Browsers I'm testing on:
Chrome: 60.0.3112.113 (Official Build) (64-bit);
IE: Version 11.540.15063.0;
Edge: 40.15063.0.0, EdgeHTML version: 15.15063
Any ideas?
Try using this
<img src="sample.jpg" alt="Wheres my image" style="width:100;height:38">
You are using source insted of src that is causing error so change that. I hope this will work.
Change "source=" to "src=" other than that it should work.
Look here for more...
https://www.w3schools.com/html/html_images.asp
In your style add a unit to the width and height like 'px'. Then replace attribute source to src :)
<html>
<body>
<img src="sample.jpg" alt="Wheres my image" style="width:100px;height:38px">
</body>
</html>
The problem is that you have used the attribute source instead of src for your <img> tag.
Rewrite your image tag as:
<img src="sample.jpg" alt="Wheres my image" style="width:100;height:38">
If the image still won't load for you, there are three possible reasons why this may be happening:
You have forgotten to upload the image to the server.Check it's actually accessible by manually navigating to it.
You have referenced the file incorrectly, either by name or by path.
You need to clear your cache.Hold CTRL and click the refresh icon to clear your image cache.
I'm sure this is super easy but I'm a beginner. I have my code to pull up my logo but my logo just pulls up a broken image icon. See screencast
See screencast: http://screencast.com/t/ar8cpTIbMs
Here is my HTML:
<div id="logo">
<img src="C:\Users\Brent\Documents\Website Development"/>
</div>
I really only need my HTML figured out and I assume the CSS will work pretty well after that. Thanks for the help!
You must enter the correct file name for src. Such as
<img src="C:\path\to\your\file.jpg" />
http://www.w3schools.com/tags/tag_img.asp
Please note that it is not a good practice to use absolute paths in your src attribute.
In the other hand, you can use base64 encoded image data as src of your img tag. Something like
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...//Z" />
https://www.base64-image.de/tutorial
If you use this method, you dont need to keep your logo.jpg file anywhere.
Hope this will help.
You are linking to a directory in your img tag, instead of an image file. Also, I would suggest either practicing online in a free webhost or downloading a stack package like WAMP/MAMP/LAMP. You'll start running into problems where you can use http protocols pretty quickly in your studies. Though, that can get technical, so I say stick to a free webhost for now. You will get weird hang ups trying to use the file system that will ultimately confuse you while you are trying to learn.
The problem lies in your src for your <img>. You're linking it to a directory /Users/Brent/Documents/Website Development right now, when you should be linking it to the image. If your image is called logo.png, then you should link it with C:\Users\Brent\Documents\Website Development\logo.png. Also, instead of linking it to C:\Users\Brent\Documents\Website Development\logo.png, link it to the image based on where the file is. For example, if your file is in \Website Development\index.html, then all you need to put for the src is "logo.png".
You should move your logo to the same path as your website. Ex:
Website: C:/site/index.html
Logo: C:/site/logo.jpg
Then include the logo as:
<div id="logo">
<img src="logo.jpg">
</div>
Hint: You don't have to have the div for the logo to show up.
please enter the complete path including your image.
for example if your file name is mypic.jpg .Then
<img src="C:\Users\Brent\Documents\Website Development\mypic.jpg" />
I have an issue with firefox, it doesn't load an image.All the other,Chrome, Opera and IE can load this but firefox fails, it does not display any picture and if i go check with firebug it displays the following error on the image link: "Failed to load the given URL". I did clear my cache, also, if i open the image link in another tab it works.
THe code:
<ul class="nav navbar-nav navbar-right">
<li>
<a style='padding:4px' href="<?php echo $login_url?>">
<img src="<?php echo base_url(); ?>img/facebook_log22.png" class='facebookLogin' />
</a>
</li>
</ul>
Also in style:
.facebookLogin
{
height:40px;
}
I'm using codeigniter(if u wonder about base_url() function) and bootstrap(but i don't think that matters so much.
Edit: I also see that it adds another class to the code...
Also,the error:
Ok,i finally know what the problem was,and it is called adblock plus.Damnit,totally forgot i have that installed on my firefox.
Thanks a lot guys.
If you are referencing image from domain, it will not work, unless you:
put http:// in front of your link: src="http://<?php echo base_url(); ?>/img/facebook_log22.png", or
create a relative link: src="/img/facebook_log22.png" .
I also ha a similar error , i opened it again with a different browser it was working .
right click >View Image > you must be able to see your image if the link is correct .
I once had a similar problem and after a frustrating time of checking and rechecking my path, I realized the problem was the images were uploaded as ".JPG" but my css had ".jpg" It was a capitalization issue.
In the code below, I am using an image images/newlogo.PNG for a logo. I am trying to add the same logo to a WordPress blog, but WordPress can't seem to find the logo. Any idea where I should put the image so that WordPress can find it?
Thanks in advance,
John
<div class="newlogo">
<a href="index.php">
<img src="images/newlogo.PNG" alt="Books" border="0"/>
</a>
</div>
My experiece with WordPress is many times you need the full path for images called outside of the style sheet, because your full path is something like username/public_html/wordpresshere
Best to put images in your theme so they stay put whn you change themes or go along when you download/backup themes
So, hardcode your full path from your URL, or:
Use this to return site URL:
<?php bloginfo('url'); ?>/wp-content/themes/default/images/newlogo.png
Or this to return the current template directory:
<?php bloginfo('template_directory'); ?>/images/newlogo.png
Like this:
<img src="<?php bloginfo('template_directory'); ?>/images/newlogo.PNG" alt="Books" border="0"/>
If you use an 'absolute' path (relative to the server) like this:
<img src="/images/newlogo.PNG" alt="Books" border="0"/>
You just need to put the image in the images folder in the root of the server
I think you need to have the file in the wp-content folder.
If you are adding this code into a theme file, you need to use the path to the image directory within the theme directory. This can be done by using get_template_directory_uri().
Here is an example:
<div class="newlogo">
<a href="index.php">
<img src="<?php echo get_template_directory_uri(); ?>images/newlogo.PNG" alt="Books" border="0"/>
</a>
</div>