I have a simple html page :
#my_svg{
width: 75px;
height: auto
}
<a href="#">
<div id="my_svg">
<img src="https://svgshare.com/i/MHB.svg" alt="English flag">
</div>
</a>
All I see is English flag so it seems like my svg is not loading. I'm sure about the path because I have the image as png on the same folder and it's working well. Just changing the extension.
The weird part is that I don't have any 404 error in my console. It's working when I add it throught the link https://svgshare.com/i/MHB.svg but when I use the local file it doesn't work. On my side I don't have any webserver and don't want
So your problem is its not working on the local file right? I think it will work if you use <img src="./flag.svg" alt="English Flag'>. That should work, sometimes not adding "./" on the src attribute will have issues because the browser might think it is a web link, not a path link.
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)
I'm making a Landing page and I want to put there some png images links but they don't show. When I set png as background image I saw it on the page but casual <img>doesnt work. Path of the file is okay, I'm sure of that, but console says "404 file not found".When I'm using exactly the same path as bg image it works perfectly I don't know why... I'm writing styles in SCSS and using components for different parts of the site if it matters.
Plz help I'm new T.T
here are the links
<div id='media'>
<a target='_blank' href="https://en.wikipedia.org/wiki/Facebook">
<img src="/src/images/facebook.png" alt="ikona facebooka">
</a>
<a target="_blank" href="https://pl.wikipedia.org/wiki/LinkedIn">
<img src="/src/images/linkedin.png" alt="ikona linkedin">
</a>
</div>
and structures of my folders looks like that:
./src:
../fonts
../images<--here are the png files
../js
../sass
../templates:
.../components
...index.html
./web:
../css
../images
..index.html
Your styles.css file is located in a different place than your template files so the path SHOULD be different.
From your stylesheet location
web/css/style.css -> ../../src/images/filename.png
From your template location
src/templates/index.html -> ../../web/images/filename.png
Here's what to do to troubleshoot file paths:
Open dev tools => network tab (select images in your case)
Look for the file in question
If it's 404ing your path could be bad.
Try to load your image in a new browser tab with the full URL path you THINK it should be. (make sure it's serving properly)
Then check that full/serving file URL against the URL in your code
Is this a WordPress site? If so make sure to output the full path with
<?php bloginfo('template_directory'); ?>/path/filename.jpg
Remove the '/' from the beginning of the image path.
So change this:
<img src="/src/images/facebook.png" alt="ikona facebooka">
To this:
<img src="src/images/facebook.png" alt="ikona facebooka">
I am trying to add a logo to my webpage. I am using CSS and eclipse. The image shows as a broken image and I am not sure why. The image I am trying to use is in the folder specified :
Does it need to be added in CSS or can someone please help me to know where I am wrong. Thank you.
<body>
<div class="jumbotron">
<h2 style="text-align: center; color: white;"> New Plan </h2>
<a href="#">
<img src="resources/img/logo.png">
</a>
</div>
</body>
This wouldn't be a css issue if the browser is showing the broken link icon. That icon means the path to the file is incorrect or it can't retrieve it.
To confirm this, take resources/img/logo.png and add it to the end of the URL where your HTML is, excluding any files. For instance, if your URL is http://example.com/index.php, you want to make the URL read as http://example.com/resources/img/logo.png, without the index.php.
You will need to tweak this URL until the image shows up in the browser, since you didn't provide a URL where the HTML is running. When that happens, the URL in the address bar is the one you can use for the image URL.
I am trying to add an image as a sign in button to my website's header. When a user clicks/taps the button, it redirects them to the sign in page. I'm creating a ruby on rails app, and my image is located in "app/assets/images", but I can't seem to get my image to appear.
And I do not want to upload the image to a site such as imgur and link it to my site.
Here is what I've tried so far.
Attempting to link with CSS:
1) background-image: url(../images/sign-in.png) no-repeat;
2) background: url(sigin-in.png);
And I've tried getting it to work with display: block; width:128px; height:128px; position: relative;
Attempting to link with HTML:
<a type="button" class="navbar-toggle btn-signin">
<img class="signin-img" scr="../images/sign-in.png">
</a>
Note: I've tried other methods in HTML too, such as creating <button> tags,<div> tags and<a> tags.
It's a ".png" image, does that play a factor for not appearing?
Try changing the src value of your image to ../../assets/images/sign-in.png.
Your full image element should look like this:
<img class="signin-img" src="../../assets/images/sign-in.png">
Here you are mixing backgound-image and background-repeat:
background-image: url(../images/sign-in.png) no-repeat;
this should be:
background: url(../images/sign-in.png) no-repeat;
Also, in some RoR apps, using MVC pattern, the assets are being referenced from the root level of the app, so you might have to change the paths to the files.
probably you could try removing the "../"?
do you have any other images that are being correctly displayed?
good luck!
I solved the issue! I figured it had something to do with rails, since this only happens when I make rails apps/sites.
Since my html file is erb (embedded ruby), I had to "embed" the image in my html like this:
<img src="<%= asset_path( 'sign-in.png' ) %>" />
Thank you to everyone who answered!
First, make sure it's src not scr.
<img class="signin-img" scr="../images/sign-in.png"> # bad
<img class="signin-img" src="../images/sign-in.png"> # good
Second, open up developer tools (https://developer.chrome.com/devtools) and see if the browser is requesting the image:
images/sign-in.png
It will look like this: (make sure you're in the network tab)
Im building a webpage and have the following code in the page:
<img alt="chat" href="images/chat.jpg">Chat now
The image "chat.jpg" is in the images folder, which is in the same folder as index.html, and if i browse to "localhost/site/images/chat.jpg" it displays but it doesnt show up in the index page at "localhost/site/index.html".
I have tried changing the href to "/site/images/chat.jpg" and the same thing happens.
There is no href attribute for img elements. You are looking for the src attribute.
Validators are useful tools.
This will work for your problem.
<img alt="chat" src="images/chat.jpg">Chat now