The standard <image> tag works fine with a local image:
<image src="../../data/pics/1001.png"></image>
The tag <rich-text> works fine with remote images:
<rich-text nodes='<img src="http://images.kaishiba.com/o_1cs1glier2lsdge1q9irbs1a5u4e.jpg">'
></rich-text>
But the <rich-text> tag doesn't work anymore with my local image:
<rich-text nodes='<img src="../../data/pics/1001.png">'
></rich-text>
I just get a little empty square on the screen.
From the official documentation here, it is supposed to be supported.
Is there something wrong in my code ?
The answer was in the Bug & Tip section :
tip: img label only supports network images.
works fine for me with local path in .wxml file. I set the variable .js file and called that for path. It works with normal string as well.
But in .wxss file, it didn't work as background-image url. Here it works with network images only.
.js code
data: {
profileImg: '../../media/profilePic1.png'
}
.wxml code. called above
<image class="userinfo-avatar" src="{{profileImg}}" mode="cover"></image>
.wxss file code didn't work for local image path
.bg
{
background-image: url('../../media/profilePic1.png');
}
Related
This is a bit of a weird one.
I'm working on a React app, and have some images in the public folder:
my-app/public/images {images in here}
And sure enough, in my React component I can access the images:
<img src='/images/img-1.jpg' />
I can also bring up the image in my browser:
http://localhost:3000/images/img-1.jpg
So far, so good.
But here is the weird bit...
In my CSS if I do background-image: url('/images/img-1.jpg'); I get: Error: Can't resolve '/images/img-1.jpg.
I've tried images/img-1.jpg, ../images/img-1.jpg, /public/images/img-1.jpg and all attempts result in the same error.
I've resolved it my creating a copy of the images in:
/src/src-images/...
And this works, but it means I have to have images in two locations. This can't be right:
background-image: url('src-images/img-1.jpg'}); // For CSS
<img src='/images/img-1.jpg' /> // For component
Does anyone know what either I am doing wrong, or do images have to be in two folders?!?
BTW, if I put the images only within the src folder the the Component code cannot access them!!
Thanks for your help.
I'm trying to render an SVG on the screen using css. Here is my file structure. Root > Assets > Icon > user-icon.svg. So, I'm trying to add that using CSS like this:
.user-element {
background-image: url(/assets/icons/user-icon.svg);
}
But nothing is showing up on the screen and I'm getting this error in the console:
GET http://localhost:4000/assets/icons/user-icon.svg 404 (Not Found)
I'm not trying to make a network request. More just trying to find the SVG in my local file system. Any help on this would be great Thank You!
in front of url put this: ./ and put the path in quotes ('') like below:
.user-element {
background-image: url('./assets/icons/user-icon.svg');
}
If again it does not work then it means that the path is wrong
But as i can see in your question,you say that the icon is in assets/icon/user-icon.svg but in css code you are using assets/icons/user-icon.svg so the path it is wrong.Try to use the below code:
.user-element {
background-image: url(./assets/icon/user-icon.svg);
}
With this kind of URL, just a path, the browser will prepend the scheme, server and port of the current page.
To access local filesystem try the file scheme.
I have tried to link a path for an image in my CSS several different ways but it won't work is there anything that I'm missing?
background:src="C:\Users\simcity\Documents\HTML\Header.jpg";
It looks like you're trying to set a background image.
In that case
background: url('C:Users/simcity/Documents/HTML/Header.jpg');
would be the appropriate method.
Actually you must not use local paths, but else URL paths so for example:
background:src="C:\Users\simcity\Documents\HTML\Header.jpg"; might be:
background:src="Header.jpg"; if your image resides at the same level of your html document or background:src="/path/to/your/html/and/img_folder/Header.jpg"; if the image is in another folder (the folder must be at the same level of your html)
EDIT:
is background:url('path for the image') not background:src="path for the image"
I think the CSS syntax what you are looking for:
#id {
background: url("C:\Users\simcity\Documents\HTML\Header.jpg");
}
How to access images that are one folder above. The background-image does not appear in the html because of wrong directory or reference.
background-image:url("imgs/hours.png");
#schedules{
float: left;
margin-left:10%;
background-image: url(file:///C|/wamp/www/web/crosscafe/imgs/hours.png);
}
span {
font-weight:bold;
}
As said before, and just to make sure, if you're using WAMP you need to access the webpage through the localhost or any address that was provided for that purpose. Accessing through file:// normally ignores most of the server-side usage WAMP provides you with.
That being said, I think your problem is fairly simple. If you are using a framework file structure you probably have the following strcture:
imgs/
css/
js/
index.html
So, and since you're working on your CSS which is in the css subfolder, your URL needs to be the following:
background-image:url("../imgs/hours.png");
The two points (../) tell the browser to go to the parent folder, then into the imgs folder and then search for hours.png.
First of all, you should only comment css using /* and */. // in css will not be treated as comment at all.
For your problem, you should use firebug to make sure that your element which id is schedules have a appropriate height and width.
And, if you are using WAMP, access your website from a URL start with http://, that page could not display a image stored on your local side, I mean, via file://. This is prohibited by your broswer. You should use the relative path instead, and the relative path is start from your css file.
So you can try this:
#schedules{
float: left;
margin-left:10%;
background-image: url(imgs/hours.png);
height: 100px;
width: 100px;
}
and save "imgs" near your css file.
If you still have problems, I think you should paste your HTML on.
If you try to display an image from that imgs directory in other place in your website, does it is shows? If not, it can be your .htaccess file. It might be blocking the access to your images dir.
I must be doing something wrong. The image was exported from illustrator as an SVG and (I'm not sure whether this is relevant or not) it does have some pixel data in it.
Here's my JSFiddle example.
Note that going directly to the image, it shows up just fine:
http://ykcreations.com/tv.svg
Edit: This does not work in Chrome or Safari but DOES in Firefox. Webkit issue?
There is a problem with your source SVG. See this updated Fiddle pointing to a different SVG file that works correctly: http://jsfiddle.net/wdW2K/2/
.tv {
background: url("http://phrogz.net/svg/800x800.svg");
width: 400px; height: 400px;
}
Edit: Specifically, the problem appears to be that WebKit does not support <image> in an SVG used as a background. Modifying your file minimally to change the <image> to reference a local (non-data-uri) file, and adding a <circle/>, I was able to see both the image and circle when viewing the SVG directly in Chrome, but when used as a background image only the circle was visible.
This bug smells relevant.
It has to do with your image, try plugging the following into your CSS:
.tv
{
background-image: url("http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg");
width: 400px;
height: 400px;
}
Perhaps your SVG is actually an SVGZ? SVGZ files are the compressed versions of SVG files. Usually you have to configure your server to handle that, but FF may just be able to deal with the compressed versions.
EDIT
See Phrogz's answer below (possibly above by the time you read this); it covers this and gives a better explanation.
Another possible cause is serving the SVG with the wrong MIME type. Setting it to 'image/svg+xml' may fix the issue.
In Rails, this can be done by adding the following to config/intializers/mime_types.rb:
Mime::Type.register 'image/svg+xml', :svg
I had a simmilar problem with rendering svg as background image in Chrome, but everything was fine in Firefox. I found out that there was a syntax error inside my svg files exported from Adobe:
wrong xlink attribute:
xlink:href="data:img/png;base64
correct xlink attribute:
xlink:href="data:image/png;base64
Article bellow:
Link to article from css-trick that helped me