I’m a little frustrated because it took a very long time to get file upload working. I’m working with vue on the frontend and using meteor for backend. The file-upload is done using Meteor-Files from VeliovGroup. The uploading works without issues and the files are getting stored in the .meteor-Directory (default Directory of Meteor-Files) while the app is running in dev mode. But now, how can I get the images or other files I uploaded? The path that is stored in the FileCollection for each file is not right, if I use it for example for the src-attribute of an image. Is there something I’m missing? Is it simply not possible at dev mode?
I tried to set different storagePaths in the Meteor-Files-Settings, tried the "path" and the "link" attribute of the Fileobject in the FileCollection.
<div class="" v-for="Image in getImages">
<img :src="Image.path" />
</div>
<!-- this is the Vue-Frontend where I'm trying to display the images, getImages is the FileCollection from Meteor-Files -->
I Just want to display or get my images, which I uploaded.
Thanks a lot in advance. If you need specific code snippets, just ask
Mario
Does the same thing happen when you just hardcode the src for 1 file? I've had quite a lot of trouble dynamically binding to an img tag in the past. So I wonder, if you just replace <img :src="Image.path" /> with <img src="yourhardcodedfilepath" />, does the image then get displayed, or is it still not displaying correctly?
Okay, I took the wrong absolute path for the config.storagePath. Now it works with the right absolute path. But I still can't access uploaded files in dev, that have been uploaded to the relative path in the temporary build-folder. But I think, I can do a workaround for that.
Related
I used froala with pure java script before.
On that project, I could easily copy and paste images well.
It save in my server and I managed it easily.
And now I'm using froala on react.js.
Whenever I try to paste my original blog article, it doesn't paste properly.It doesn't save in my server.
"image.beforeUpload" and 'image.beforePasteUpload' event didn't answer. So I guess the froala can't detect img tag at all.
This is the log I got after paste the blog article.
GET http://localhost:3000/blog/%3Ca%20data-fr-linked= 404 (Not Found)
The img tag look like this:
<img data-fr-image-pasted="true" src="%3Ca%20data-fr-linked=" href="https://originalImgAddress.com" class="fr-fic fr-dii fr-draggable">
I have no idea why does froala editor can't detect image!
I hope someone can solve it!
I built a website on NextJS and deployed it on vercel. On the local environment at localhost:3000, it shows the background image but on vercel it does NOT show the background image.
Below are screenshots
On Vercel :
On Local :
I am setting the background image with the tailwindCSS where I defined the images in tailwind.config.js file and using them in different components. But that is not the issue as it is working fine in local envirenment.
I don't know what is the reason that why it is behaving differently.
Project GitHub Link : https://github.com/mohitm15/Weather-Lytics
Instead of using relative imports to the public folder within your tailwind config, you should leverage next's static file serving to load images from it.
For example, if you look in the DOM, the URL pathing generated during the build process is trying to utilize mini-css-extract-plugin to create a path, but the path is not valid:
When using static file serving, your tailwind config would change from:
'day_sun' : "url('../public/back_big.jpg')",
to:
'day_sun' : "url('/back_big.jpg')",
When compiled, the path may look incomplete, but it's actually directing that request to /public/[image].[ext]:
Working demo (the weather searching feature will not work since NEXT_PUBLIC_API_KEY_1 is undefined): https://weather-lytics-refactor.vercel.app/
Even though I load my images from static file serving, similar bug still happened to my app.
The bug is at my /public/img folder. According to the document, seem like the /img folder have similar name with some next file or folder, which can cause bug.
To fix it make sure you don't have any folder name "img" or something like that . . . (name "pic" work for me)
guys I am fairly new to React Js, however I am working with a code that has been sent over and I need to edit for some images. So, I know the basics of changing, styling and just overall editting in React js, not that hard. But I am newbie when it comes to error messages or errors I can not see.
"dogs":{
"text": "This is text",
"src" : "img/dog.png"
}
Calling it in my app.js using:
let {text, src} = config.sections.information[title];
return (
<ImageSplit key={k} title={title} direction={dir} text={text} src={src} />)
So, as you can see in the code snippet above I use a .json file for the text and image. However, the images do not come up at all, and in the console i am getting the error message of:
Failed to load resource: the server responded with a status of 404 (Not Found)
I have looked online for a solution with using WebPack, and it wants me to use require() however, I get the error of 'no module found of 'image name''
Solution:
Image file should be relative to the .json file not the app.js. Rookie move.
With trying my best to find out exactly what went wrong, I came across nothing within the console, apart from the error message mentioned above.
So, I found out the issue I was having was based up my git repo not being up to date, so the live version of the app was working fine with the images but the client side was not. Pulling also did nothing, so what I done is I reinstalled WebPack, reset my .json file and made sure the images were relative to the .json file and not to the app.js. Rookie move on my part. Thank you for everyone who replied and tried to help.
I am new to this and trying to figure this out. I have created a internal.ascx page and a Internal.css file for my internal page for a website. If I create a new page in DNN and apply this new skin it doesnt seem to apply the CSS. I copied the both ascx and css file to the _default/Skins/ folder.
Have also tried adding in the css via the following code
<dnn:DnnCssInclude runat="server" FilePath="/Internal.css" PathNameAlias="SkinPath" />
Nothing seems to be working. Have cleared my cache and tried different machine to view the page. But the style is still not coming through.
Thanks in advance
Create a new folder in the _default/Skins/. For example, call the folder "Internal" (/Portals/_default/Skins/Internal). Copy your ascx and css skin files into there. Rename the css to "skin.css". You shouldn't need to reference it in the ascx since DNN will pick it up based on the name.
Also, the reason your CSS include statement may not have worked was because filepath "/Internal.css" was probably trying to look for it in the root of the website. I would think it would simply be "Internal.css". But you could verify in Firebug what path it generated.
I am new to EXT JS environment. I am working on a dynamic java project in eclipse indigo where i want to use ext-js calendar in one of my jsp.I saw the EXT_JS calendar demo from downloaded 'ext-4.1.1' sdk(index.html file in ext-4.1.1a\examples\calendar).
I want to create a .js file as like ext-js calendar page. So for that i followed the path given in
http://loianegroner.com/2010/11/spket-setting-up-eclipse-ide-for-ext-js-and-jquery-development/ to integrate ext-js in eclipse.
But now when i copy index.html to my webcontent folder then it is not working(Originally it is showing nothing). But when i copy the entire ext-js source code to my workspace web content then running the index.html file in example/calendar folder of ext-4.1.1a giving me required result.But I don't think this as a solution.
I could not find any way also how to start to do my task.
So Pls anybody help me here...
Regards :
Dev
When nothing shows up on the screen, it is commonly a case where the ExtJS library isn't loaded. Without seeing the code, it's hard to pinpoint the issue.
Using Chrome Dev tools or Firebug for Firefox, take a look at the console and/or network output.
The files you're looking for will be included in the <head> section of your index.html. There should be ext-all.js or possibly ext-all-debug.js at a minimum, plus the style sheets.
If this is your issue, then you need to include the proper paths to the ExtJS library. This can be the local installation, or you can use a CDN. For example:
<script src="http://cdn.sencha.com/ext-4.1.1-gpl/ext-all.js"></script>