Versions:
React: 18.2.0
NextJS: 12.2.0
Simple image asset is just refusing to load when is used inside <img /> tag with src attribute set to data:image/svg+xml;utf-8,[svg data here]
When I paste this url data:image/svg+xml;utf-8,[svg data here] directly in the browser everything loads fine as expected the source image is there and all other things. The next.config has all the required image configuration and in the code for the image currently we use normal <img /> tag. The asset loads fine when its not called like svg, e.g. src="https://external-api/image.jpeg" In the network tab the response for the image is 200 all the time, but the preview shows only the svg styles with the default placeholder for missing image.
If I paste the image in THIS online encoder the image is NOT loading (behaves like in my problem), but if I copy the encoded url from the page and paste it in new chrome tab the image loads w/o any problem.
Examples:
Source image
Svg code that goes in to the src
data:image/svg+xml;utf-8,%3Csvg viewBox='0 0 1044 1054' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg opacity='.7' filter='url(%23a)'%3E%3Cpath d='M309.796 414.322 190.497 535.433 467.98 803.76l119.299-121.111-277.483-268.327Z' fill='%23000'/%3E%3C/g%3E%3Cmask id='b' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='116' y='91' width='837' height='837'%3E%3Crect width='440' height='1000' rx='220' transform='matrix(-.70604 .70817 .70746 .70675 335.664 0)' fill='%23000'/%3E%3C/mask%3E%3Cg mask='url(%23b)'%3E%3Cpath fill='url(%23c)' d='M109 84h850v850H109z'/%3E%3C/g%3E%3Crect width='294.223' height='822.461' rx='147.112' transform='matrix(-.70575 .70846 .70718 .70704 228.716 325)' fill='url(%23d)'/%3E%3Cdefs%3E%3Cpattern id='c' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23d'/%3E%3C/pattern%3E%3Cfilter id='a' x='.497' y='224.322' width='776.782' height='769.437' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='95' result='effect1_foregroundBlur_3332_33632'/%3E%3C/filter%3E%3Cimage id='d' width='1' height='1' xlink:href='https://fakeimg.pl/250x300/fff000/'/%3E%3C/defs%3E%3C/svg%3E
And how is renderd in the app
What was tried:
If the image is encoded in base64 works, but with huge performace drawbacks mainly on older IOS devices.
Next config option for dangerouslyAllowSVG doesn't change anything...
Related
I'm having a backend server with an upload folder directly in the root.
In my backend, http://localhost:4000, I have my upload folder and I'd like to display the image that matched the url given for each element I have in my backend :
const url = "http://localhost:4000/"
{filteredDrawings && filteredDrawings.map((drawing) => (
etc...
<div className='cardimage-container'>
<Card.Img variant='top' src={`${url}/${drawing.imageLink}`} />
</div>
When checking my browner, i have src="upload/testupload.jpg" displayed as src of the image but I have nothing displayed
I wrote app.use("/upload", express.static(path.join(__dirname, "../upload"))); in my my backend app.
When I try http://localhost:4000/upload/uploadtest.jpg, I have "Cannot GET /upload/uploadtest.jpg"
Thanks in advance
Ok problem solved, the issue was the quote not being ' but `
app.use(`/upload`, express.static(`upload`));
the error you faced is because the route /upload/uploadtest.jpg is not defined well as a route in the nodejs , you should read the document based on id or other identifier and return as a binary.
as for react try {{ }} without $
in this case it should be worked without any problem
I am testing Jimp.js for image manipulation (using React with react-scripts, npm: 6.14.4, node: v12.16.3)
Everything is going well except writing text on a loaded image
import Jimp from 'jimp'
Jimp.read(image)
.then(image => {
console.log('image loaded', image)
Jimp.loadFont(Jimp.FONT_SANS_32_WHITE).then(font => {
console.log('font loaded', font)
image.print(font, 10, 10, 'Hello world that wraps!', 12)
// write image
})
})
This throws an error "error parsing font malformed file -- no element" in browser.js of load-bmfont module line 71 and dont execute the log 'font loaded'.
Googling not help i found only 2,3 items about this, associate with using custom fonts - but i use standard font from Jimp. (Using BMFont files instead of Jimp standard fonts doesnt help)
My first thought was the error ocured in a React App in the browser, so i write a Jest test to see if its work without browser context but it fail just like that.
Got any ideas?
Solved...
I'm using the React App within a Java Web Framework in a JSP File.
Jimp.loadFont(Jimp.FONT_SANS_32_WHITE)
search the font in a path that doesn`t exist for the webapp.
Moving the font files to a reachable path with context root
Jimp.loadFont(`${CONTEXT_ROOT}/foo/bar/font.font`) works.
I am implementing a reactjs app and in development mode everything is okey with images
<img src={`/images/logo.jpg`}></img>
But when I want to deploy my app using npm run build I tried to use environnement variable PUBLIC_URL but i have issues with loading images (js & css are loaded correctly)
<img src={`/${process.env.PUBLIC_URL}/images/logo.jpg`}></img>
I read that the value of PUBLIC_URL can be set in package.json properties homepage (i am using create-react-app)
"homepage": "https://localhost:8080/FOO-API/REACT-APP/",
When i try to print its value
console.log('public url : ', process.env.PUBLIC_URL)
I got the right path public url : /PROJET-API/REACT-APP
But the image does not shows up and its URL is wrong
http://foo-api/REACT-APP/images/logo.jpg
the https://localhost:8080/ part is gone and FOO-API is converted to lowercase
the URL should be https://localhost:8080/FOO-API/REACT-APP/images/logo.jpg
I think the issue is first / here,
<img src={`/${process.env.PUBLIC_URL}/images/logo.jpg`}></img>
As you can see, the result of console.log
console.log('public url : ', process.env.PUBLIC_URL)
is,
public url : /PROJET-API/REACT-APP
Which alreay contains / at the beginning.
So your URL is created as,
<img src={`//PROJET-API/REACT-APP/images/logo.jpg`}></img>
Notice that it contains 2 / at the beginning.
You just need to remove the / from beginning, like:
<img src={`${process.env.PUBLIC_URL}/images/logo.jpg`}></img>
I have been trying to load images using webpack, but somehow it's not working.
here's the related code
{ test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]' },
and here's one example of the component where the image should load
<ListItem
leftAvatar={
<Avatar src="assets/images-demo/avatars/128.jpg" />
}
but when the page loads, I get
http://localhost:8080/assets/images-demo/avatars/128.jpg 404 (Not Found)
In the network tab, I see the type of the images as text/html, (not sure why) and I see the initiator as DOMLazyTree. so, could you give me an idea of what's going wrong here?
I'm working in CakePHP 3.4.
I have an image outside img directory, in files directory under webroot
I have a files directory inside webroot along with css, img, js.
I tried using it like
$this->Html->image(WWW_ROOT . 'files' . DS . 'myimage.jpg')
which is creating path as
/var/www/html/myproject/webroot/files/myimage.jpg
But this is not showing image. Copying and pasting path in another tab is loading image perfectly. Also, moving image file to img directory and using $this->Html->image('myimage.jpg') is working fine.
Why it is not working ? Also, It is easy to build url for directories css, img and js like
// Outputs http://example.com/img/icon.png
$this->Url->image('icon.png', true);
OR
// Outputs /img/icon.png
$this->Url->image('icon.png');
which will result as
http://example.com/img/icon.png
I want to build url for files directory like
http://example.com/files/myfile.jpg
OR
// /files/myfile.jpg
How to build url for directories other than img, css and js.?
I'd doubt that using that path as a URL will work, as it's a filesystem path, and that's where the problem is. HtmlHelper::image() only supports URLs, relative as well as abolute ones (I guess the docs on this could be improved).
By default relative paths are expected to be relative to the /img/ folder. In your case you could pass a (web)root-relative path, like:
/files/myimage.jpg
If you want to generate an absolute URL, use the fullBase option:
$this->Html->image('/files/myimage.jpg', ['fullBase' => true])
See also
Cookbook > Views > Helpers > Html > Linking to Images