When i'm trying to display an image <img src = {require(path)}/> I dont know why, i dont get that images when i start the react app, althogh my partner on his computer can see the images. And I have deleted and installed all from his files.
The images on browser appears as <img src = [Object Module]/>. I've done some research, and it seems to be some problem with webpack or url-loader, but i dont understand why on my computers isnt working and in my parnert is.
If someone have an idea. Please help.
Thank you.
Try to import the image first like this:
import image from '../image.jpg'
const App = () => {
return (
<img src={image} alt='image' />
)
}
You might wanna wrap the src value in braces
<img src={require(path)} />
Related
We're using Next.js 12 with SSR in our project. I've read through the Pendo documentation but I'm still not sure where to place the install snippet in our code, as Next.js doesn't provide an index.html file. We're using layouts however, is the top of the layout a good place to place Pendo?
I was trying to put the snippet as a function inside of the layout component's return, but it apparently doesn't work like this.
Thanks for any help!
Your _app.tsx should start with something like this and this will work:
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
{/* Pendo Offsite MPA setup code snippet */}
<script
dangerouslySetInnerHTML={{
__html: `
(function(apiKey){
...
...
});
});`,
}}
/>
<sometag />
</>
);
}
Paste your Pendo script code as is into the placeholder above as a comment block.
The _app.js file works as index.js, the entry point for the whole application including every sub-page of it.
I'm trying to display image from public folder of my node api directory. I want to display image in front end vue file. I don't know how to give source of image.
This is the directory. I want to display image nodelogin.png
I want to display these images.
<img :src="myimage" alt="Logo" width="80" height="80" />
This is my template code.
async created() {
this.myimage = await this.getImage();
},
methods: {
async getImage(){
return await 'http://localhost:4000/api/public/nodelogin.png';
}
}
But this code gives an error response.
Cannot GET /api/public/nodelogin.png
Actually I'm new to node and Vue So I'm not sure whether my logic is correct or not.
Do I need to do something from my backend side?
Just use the url '/nodelogin.png'
Thanks for your question posting.
If you want see png, you should input url :
http://localhost:4000/nodelogin.png
Good luck for your business.
I have successfully managed to save the filename to my mongodb database, but I can't seem to figure out how to display the image to handlebars page. This is the code that I'm using:
router.get('/showPost/:id',(req,res) => {
Post.findById(req.params.id).then((post) => {
res.render('showPost',{ post: post})
});
This is how I try to display my image, but it only appears as a broken icon.
<img src = {{{post.image}}} >
Any help would be appreciated!
Have you setup your index.js properly?
app.use(express.static('public'))
Create root folder call public. Put your images there
Then do
<img src="/{{post.image}}>
This is a unique question: I don't want to use browser javascript to solve this, please read on...
I want to convert <img src="..."> to Base64 img tag by compiling the app (ng build or ng serve), to make the image load instantly - without further downloads other than the app itself, but also to make the image dynamicly changable while developing the app.
For example, here's a component - home.component.html:
code before compiling (notice the base64 directive, its just an idea though):
<img src="assets/images/phone.png" base64>
code wanted after compiling:
<img src="data:image/png;base64,iVBORw0......rest-of-base-64-goes-here">
Important: This should happen without running a front-end javascript operation by the user, or by calling the image file. (by means, the file phone.png will not even exist when compiling)
I still want to edit the local image phone.png while developing.
I know I can convert the file to base64 manually and update it in my component, but that's exactly what I don't want to do - I want it to happen automatically to save time.
That means the image will sit in the component itself, in one of the .js files that has been compiled, and therefore will load instantly with the app.
Idea: It would be nice and easy to have a directive that would take care of that.
something like <img src="phone.png base64>**
I assume it can be done using node/webpack in some way, but I have not idea how.
You need to use readAsDataUrl()
function getBase64(event) {
let me = this;
let file = event.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
//me.modelvalue = reader.result;
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
Hope can help you..
I'm working with polymer and I'm testing all in my local environment and all is working as expected, but the problem is when I'll move it into production, where the url shouldn't be the same as in my local. In node.js I can set it via the config.json file and catch it with app.get('config') or something like that, but in polymer I cant get it, and the only chance I have is to create another endpoint with all the config.json config file, but, and here is the best part, I should hardcode this url in polymer!! (so annoying). There is some way or library or component or something that I'm missing ?
Thanks in advance guys! StackOverflow and the users helped my a lot!
UPDATE
The thing is that I'm using custom elements (because I had handlebars too and there is a little problem with the {{}}) so, in the custom elements that I created I have this (for example in the core-ajax call):
<core-ajax id="login" auto="false" method="POST" contentType="application/json" url="/app/middle/login" ....></core-ajax>
as you can see the url is a little bit hardcoded, I want to use something like this (this is what I have on the node.js endpoint application):
router.post(endpoint.login, function (req, res) {
and I want to got something like that over polymer
<core-ajax id="login" auto="false" method="POST" contentType="application/json" url="{{login}}" ... ></core-ajax>
<script>
Polymer('log-form', {
login: endpoint.login,
ready: function () {
....
})
});
</script>
I'ts more clear now? I'm not so strong on english language.
Thanks Guys, for all!