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>
Related
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...
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 can add a new page with hugo new posts/new-page. But I want to add a page bundle. None of the following work
hugo new posts/2021/10/new-page creates a single new-page.md
hugo new posts/2021/10/new-page/ does the same as above
hugo new posts/2021/10/new-page/index.md works, kind. It creates index.md in the correct path and populates index.md with the archetypes/default.md except, it set the title to index instead of new page
so, how can I add a page bundle with hugo new
You can achieve that using Archetypes , quoting from the docs:
Since Hugo 0.49 you can use complete directories as archetype templates.
in the archetypes/ folder create a new folder named post-bundle/
inside it create a new file index.md
archetypes/post-bundle/index.md :
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---
Then to create a page bundle:
hugo new --kind post-bundle posts/new-page
Notice: I don't think the approach you're doing to set the date in the url is correct , the above method will give a post with the following Permalink : example.com/posts/new-page you can then do the following to get the desired Permalink:
config.toml :
[permalinks]
posts = '/:year/:month/:title/'
In support of Mossab's answer...
a page bundle has three categories:
Branch,
headless
and leaf.
So if you made a file _index.md - it's a Branch bundle, off-the-bat. So viola that's how you make it with hugo new.
If you want a headless bundle, I believe you first need a leaf bundle, and then add:
headless = true to the front matter.
If you want a lead bundle you create an index.md file at any directory level.
So, I believe my point in this is, the way you do this is:
hugo new _index.md
Or
hugo new index.md
and if you want it headless, you use an archetype with the front matter (as Mossab desribes).
Please let me know if I'm possibly misunderstanding something.
I have a spring boot app and a controller that server static webpage(React build):
#Controller
#RequestMapping("/test")
public class HomeController {
#GetMapping("/")
public String index() {
return "index.html";
}
...
index.html is located at: ../resources/static/index.html
also in application.yml:
spring:
mvc:
static-path-pattern: /test/**
I am having two problems(problem 2 is the main issue):
I must call the following url with the trailing '/' at the end: http://localhost:8100/test/ I would like for http://localhost:8100/test to also map me to the view(index.html).
during the load of the page I am getting the following error:
the problem as you can see is that the url called is:
http://localhost:8100/static/css/main.6c417d20.chunk.css
and not
http://localhost:8100/test/static/css/main.6c417d20.chunk.css
(please note that the reason for the 'static' in the url is that there is a folder named: static below the resources/static folder so there is no issue with the 'static' in the url)
is it a server side problem or is it something I should fix in the react?
I searched for an answer but didn't find anything helpful.
any help would be highly appreciated,
Tnx
So the answer to my question lies in the following links:
how to build react to a non root path(homepage):
build react non root path
registering zuul client to the following path(that contains all resources):
Zuul configuration with resources
so I am leaving this here in case someone has the same issue(the answer in the second link is for vue.js and webpack,the first link explains how to change root address in react).
Answer 1 : #RequestMapping has a String[] value parameter, so can specify multiple values like this:
#RequestMapping(value={"", "/", "welcome"})
Answer 2 : You are expecting test in URL which is controller mapping not the project context path so it should not come in static resources urls.
see this answer for more clarity adding css and js in spring boot.
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