How can I convert an amazon presigned url to a correct href attribute value for the svg image?
For example, here I have a url:
https://s3.us-east-1.amazonaws.com/zed-content/Dialogue%20Items/a0A1r00002sLxg9EACLeft/testImg.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJ7V4MJWO3GNAM6WA%2F20180710%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180710T133927Z&X-Amz-Expires=604800&X-Amz-Signature=1044208e8a3fc4167fcd738637316d31a6b9a843063ec5658f8e7720c8963fb0&X-Amz-SignedHeaders=host
It url displays an image, but I do not know how to put the image situated behind the url as an svg image.
I am storing image using the .jpg extension. Now I would like to get the href for that image so that to display it using the image svg element.
In other words I want to have something like
<svg>
<image href="IDoNotKnowWhatToPutInHere.jpg"/>
</svg>
You can do it like this. Change the width and height to your liking's.
.svg-main,
.svg-image {
width: 200px;
height: 200px;
}
<svg class="svg-main">
<image class="svg-image" href="https://s3.us-east-1.amazonaws.com/zed-content/Dialogue%20Items/a0A1r00002sLxg9EACLeft/testImg.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJ7V4MJWO3GNAM6WA%2F20180710%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180710T133927Z&X-Amz-Expires=604800&X-Amz-Signature=1044208e8a3fc4167fcd738637316d31a6b9a843063ec5658f8e7720c8963fb0&X-Amz-SignedHeaders=host"/>
</svg>
Related
How do you create a circular image using nextjs Image? I have found that the solution involving wrapping the image in divs with border radius and hidden overflow isn't working.
import Image from 'next/image'
<Image src={props.profilePictureURL} height={200} width={200} alt='IMG2'/>
Add this to your css file.
img {
border-radius: 50%;
}
Answer:
<Image src={props.profilePictureURL} className={styles.makeImageCircular} height={200} width={200} alt='IMG2'/>
where:
.makeImageCircular {
border-radius:50%;
}
*mistakenly set 50% to '50%' (within a string in CSS)
I have svg image with this attributes: viewBox="0 0 100 100"
This is basic code which I use for displaying svg:
Image{
width: 50
height: 50
source: "test.svg"
}
and it's not ok because image is rasterized before resizing to width and height values(50,50).
This code works perfect on all resolution:
Image{
width: 50
height: 50
sourceSize.width: width
sourceSize.height: height
source: "test.svg"
}
because image is drawn in exact dimensions which is needed!
Is it possible to get same functionality in a TextEdit where <img> tag is used?
<img src="test.svg" width="50" height="50">
This code doesn't work because sourceSize can't be set... and image is rasterized before resizing and displaying...
Maybe there is some other way to accomplish this?
The only solution is to provide the image size as part of the image url, and reimplement QTextDocument::loadResource or QTextEdit::loadResource in a derived class. Your image element would then look like:
<img src="test.svg?50x50" width="50" height="50" />
You can parse the url in your implementation of loadResource.
I'm rendering an SVG image using
<img src="data:image/svg+xml;charset=utf-8;base64," + src />
where src is the Base64 encoded SVG image. Everything in the picture displays correctly except for the text in the fields which are not displayed at all. This problem exists in Chrome, but not in Internet Explorer. Any ideas on how to get around this problem?
If I right-click on the displayed picture, download it and view it in Linux's Image Viewer, the text shows up perfectly again.
Edit: Example of SVG image:
<svg width="700" height="220" title="test2" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text y="100" x="90" dy=".32em" text-anchor="end">
12
</text>
</svg>
In my case was a problem, that a have created <text> as document.createElement('text') and the svg result looked like this:
<svg xmlns="http://www.w3.org/2000/svg">
<text xmlns y="100" x="90" dy=".32em" text-anchor="end">
12
</text>
</svg>
And after encoded to base 64 using window.btoa() the text also not being rendered.
In my case the reason was in an empty xmlns attribute in text tag.
Solution: I have created element using document.createElementNS('http://www.w3.org/2000/svg', 'text'). It creates an element with the specified namespace URI and qualified name.
I need to "slide in" a (background-)image in a div.
When I load the page, some div with a bg image or image inside it (and overflow?) needs to go from invisible/width=0 to 100px width. This needs to ease in.
Can anyone please help me out with the js?
<div style="overflow:hidden; width:100px; height:40px;">
<img src="someimg.png" height="40" width="100" />
</div>
This uses jquery on document ready.. For easing can use the standard jquery 'linear' but I included the jquery.easing plugin where you can have different easing options.
http://jsfiddle.net/DyW7M/1/
$(document).ready(function () {
$('#makeitlong').animate({ width: '400'}, 2000, 'linear');
});
It's a known bug that -moz-border-radius doesnt work on images in firefox. What's a way to get this functionality without resorting to putting the image as a background on a rounded div?
In current Firefox you can use SVG filters. Have an SVG file clip.svg like this:
<svg:svg height="0">
<svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
<svg:rect x="0" y="0" rx="0.05" ry="0.05" width="1" height="1"/>
</svg:clipPath>
</svg:svg>
And apply it in CSS like this:
.target { clip-path: url(clip.svg#c1); }