I am using Storage and API from aws-amplify
My intention is to get the name of the image from the API and then display it in a tag. Don't know what is wrong.
I can upload images with the following command: Storage.vault.put.
I have set the permissions in the IAM-roles.
The code goes as follows:
I use the following to get the URL and used vaults as the documentation says it is used for private folders:
useEffect(() => {
Storage.vault.get("Image.jpg").then(data => {
setImageUrl(data);
});
});
In the markup I set the with the following:
<image src={imageUrl} width="200px" height="200px" alt=""/>
My AWS structure
I use Cognito to manage the login and the IAM reflects this.
In S3 the images are located in private/${cognito-identity.amazonaws.com:sub}/here
Developer tool Console:
GET https://app-uploads.s3.us-west-2.amazonaws.com/private/us-west-2....... - 404 (Not Found)
Related
I'm attempting to create a site called Mixer and deploy it via heroku
After uploading the site to Heroku, I notice the dynamically loaded images aren't loading, but the imported images are. The code I'm using is:
import Image_Not_Found from '../img/drink_not_found.jpg'
<img src={`../img/${newDrink['image']}`}
onError={(e) => {
e.target.onerror = null
e.target.src = '../img/drink_not_found.jpg'
}}
alt="" className="drink-card-image"
></img>
Now, the error image shows up, but the rest don't. Here's my layout.
>Public
>img
>{images.jpg}
>drink_not_found.jpg
>src
>components
>card.js
The drink_not_found.jpg is loading fine, and when I'm on my local computer the rest of the images are loading as well, until I deploy to heroku. Any thoughts?
So i'm working on a react project and i want to use an image which is stored in my computer
i made the following code
<img src='my_image.png'/>
however it doesn't show in the browser as shown below
see image
upload your images in your public folder then access it
eg:public/images/p1.png
<img src='images/p1.png'/>
https://codesandbox.io/embed/amazing-bouman-x3mnr?fontsize=14&hidenavigation=1&theme=dark
I am following this website https://www.pdftron.com/blog/react/how-to-build-a-react-pdf-viewer/ to implement pdf.js using iframe in React
However, in this tutorial, the pdf is a local file in public folder.
<PDFViewer backend={WebviewerBackend} src='/myPDF.pdf' />
How do I use a third party url as the src? For example, I want to display pdf in this url https://arxiv.org/pdf/0905.3531.pdf
I have created an error page with Thymeleaf and I use it that way because I can send error messages to users through the controller.
#ExceptionHandler(Exception.class)
public ModelAndView controllerExceptionHandler(
Exception e,
HttpServletRequest request) {
ModelAndView mav = new ModelAndView();
String[] messages = e.getMessage().split("</br>");
mav.addObject("message", messages);
mav.addObject("timestamp", new Date());
mav.addObject("url", request.getRequestURL());
mav.addObject("headerMessage", "Error :(");
mav.addObject("contentMessage", "We are working hard to resolve it.");
mav.setViewName("error");
mav.addObject("status", 500);
return mav;
}
In template file I have something like this:
<h1 class="mr-3 pr-3 align-top border-right inline-block align-content-center" th:text="${status}">404</h1>
<div class="inline-block align-middle">
<div>
<h1>Something went wrong...</h1>
</div>
<th:block th:each="msg : ${message}">
<h2 class="font-weight-normal lead" id="desc" th:text="${msg}">The page you requested was not found.</h2>
</th:block>
</div>
Previously I had a simple React JS application also running with Spring Boot and Thymeleaf and then I used Thymeleaf template to show that. I had a template index.html where was actually React JS build file, so every time I had to copy the build file inside there, JS and CSS files into a static folder (after build). Now the React APP got more complex and I decided to use frontendmaven plugin to build it straight away with backend.
How to tell Spring Boot to not try to use Thymeleaf when resolving ReactJS views? This is how I serve ReactJS views.
#RequestMapping("/")
public String index() {
return "index.html";
}
Or would it be possible to get rid of Thymeleaf? Is it possible to send variables to ReactJS views through Java controllers when serving those views? The modelandview example?
How to tell Spring Boot to not try to use Thymeleaf when resolving
React JS views?
Remove ThymeleafViewResolver in webconfiguration and switch to Rest api ( #Restcontroller instead of #Controller ). This way you are telling Spring for not to render a view instead act as api-endpoints.
Now you can update your react code to call these Spring rest apis, prebuilt using maven-frontend-plugin and deploy.
Now the question comes, what is the stating point for your application
Only for this purpose, you can create a single controller which will handle request to "/" and will return index page residing under resources/template folder. This index.html page will be using your prebuilt react pages as -
<script src="built/bundle.js"></script>
Demo application: https://github.com/ankidaemon/Spring5-ReactJS/tree/master/Section5/Video5.3/SpringSecurity-Reactjs-RestAPI
Is it possible to send variables to React JS views through Java
controllers when serving those views
This is called server-side-rendering, however for react this is different then jsp and freemarker, thymeleaf etc and I would say not an easy way to do it with react. You can try your luck with this -> https://codeburst.io/jsx-react-js-java-server-side-rendering-ssr-2018-cf3aaff7969d
I am building a reactjs app and inside my app I am using an iframe to load an html file which has it's own jquery scripts which are stored in in the public folder and it works fine. the html page is loaded and execute it's scripts.
<iframe id="myIframe" scrolling="yes" frameborder="0"
style={{position:"absolute", height: "100%", width:"100%"}}
src="./player.html"/>
now I have an endpoint that sending me the html file and it's scripts and I am willing to store this files in locale storage. So my question is it is possible to animate the iframe with the decoded local storage files (path problem ) and if not is there another solution for doing this ?
Thank you for your help !