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
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 am trying to load an image using React using the following code:
const DogImage = require("../../public/dog.jpg");
console.log(DogImage);
...
<img src={DogImage} width="100px"/>
but I am getting the error:
the console log statement gives:
Please let me know if you have any suggestions or if I can provide more info!
EDIT: The file listed in the console.log (dist/8ce0...) exists when built
The path is going into the default property, which is a special property used by the import syntax. Try:
import DogImage from '../../public/dog.jpg';
OR
const DogImage = require('../../public/dog.jpg').default;
Anything else would require digging into the webpack config.
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 developing a website in CakePHP 2.5.6 and have suddenly had an issue where when using $this->Html->Image(''); the image wont display on the page and I get this error if I go to the Image URL Directly:
Missing Controller
Error: ImgController could not be found.
Error: Create the class ImgController below in file: app/Controller/ImgController.php
<?php
class ImgController extends AppController {
}
Notice: If you want to customize this error message, create app/View/Errors/missing_controller.ctp
As I haven't been using CakePHP for long im not sure where to start with resolving this, its never done this before to me.
Any help would be appreciated,
Steve
EDIT:
The example I have been using is this:
<?php echo $this->Html->image('cake.power.gif');?>
it returns the following:
<img src="/trunk/img/cake.power.gif" alt="" />
I have checked and the image does exist on my server in the directory app/webroot/img/cake.power.gif
I'm working on Grails web application and need to upload files.
I have a form (simplified here):
<g:form action="save" method="post" enctype="multipart/form-data">
<input type="file" id="image" name="image" />
<input class="save" type="submit" value="Create" />
</g:form>
and in Controller code (I know that this should not be in controller but this is just to make it work and than will be designed better):
def save = {
GaeVFS.setRootPath( servletContext.getRealPath( "/" ) );
FileSystemManager fsManager = GaeVFS.getManager();
FileObject tmpFolder = fsManager.resolveFile( "gae://WEB-INF/upload_files" );
if ( !tmpFolder.exists() ) {
tmpFolder.createFolder();
}
//I NEED CODE HERE TO SAVE THE IMAGE IN THE BIGTABLE VIA GAEVFS
}
So I have two problems:
A. When save create button is pressed a get exception since it tries to use Apache Commons FileUpload that tries to save to file system.
How do I disable it?
Exception is:
java.lang.NoClassDefFoundError: java.rmi.server.UID is a restricted class. Please see the Google App Engine developer's guide for more details.
at com.google.appengine.tools.development.agent.runtime.Runtime.reject(Runtime.java:51)
at org.apache.commons.fileupload.disk.DiskFileItem.(DiskFileItem.java:103)
at org.apache.commons.fileupload.disk.DiskFileItemFactory.createItem(DiskFileItemFactory.java:196)
at org.apache.commons.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:358)
B. I need the code example to save image via gaevfs
I have seen example in GaeVfsServlet but I still don't know how exactly it should look in my case. Any kind of help is welcome.
GaeVfsServlet url: http://code.google.com/p/gaevfs/source/browse/trunk/src/com/newatlanta/appengine/servlet/GaeVfsServlet.java
I came across the very same problem and I am using a grails plugin called ajaxuploader to get around the issue - the file that gets uploaded is available to your controller as an inputstream object and doesnt have to use the commons file upload API at all.
http://www.grails.org/plugin/ajax-uploader