I'm building a desktop app with React and MySQL, I only store the image name in MySQL and the actual images are in the images folder in /src/images, When uploading new images to the images folder, the react app reload, So to avoid that from happening
I either need to store the images in MySQL DB
access the images locally not in /src but outside like D:/images/*.
but react has some importing restrictions.
How can I resolve this issue, please share your knowledge.
You need to import and use images directly in the component or serve your images as publically available static assets.
You can do this in plenty of ways:
Put all images in React's /public/images directory making them static assets of your page
Serve images as static assets from your backend (here how to do it in express.js)
Serve images as static assets from 3rd party storage service (e.g.: Azure Blob Storage)
Store images in database and provide them to frontend as data blobs - while it is possible, it's not recommended.
Related
I am fetching the image urls from database (dump from production server).
For example, say - https://example.com/imageStorage/photo.jpg is an url fetched from database.
And these urls are used to show images in HTML templates like this -
<img [src]="url">
Now in development i want to redirect these urls to fetch images from a local folder. I am using NodeJS express and angular in my application. Is there any way to do it. I tried to proxy the requests with no success.
Use this extension
https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj?hl=en
and then add a url redirect like this
I'm using ReactJS to build a site, and I want to create a link (a href="relativepath") to a local HTML file so that when the user clicks on the link, it'll open up the html page. The local file is in a different folder X outside of the project, and I don't want to upload it into my src folder because the html file depends on a lot of other files in X. Is there a good way to do so?
I also want to upload a different local HTML file that is already within the src folder of my React App. I currently have something like this:
import htmlFile from "../links/htmlFile.html"; export default function Something(props) { return (<a href={htmlFile}></a>)}
and it says in my terminal that
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <html>| | <head> >
I already tried adding in webpack + an htmlLoader, but I think I followed the steps incorrectly as I wasn't able to get it to work. I uninstalled those packages, so I'm now back to square one.
Thank you so much!
Just linking to or importing from a local file in some other location won't work unless those local files are also deployed to the server in the same location relative to the app (and the web server has access to that location).
So you'll need to copy the file and its linked dependencies in a folder that will be deployed along with your react build, but not where it'll get treated as part of the react codebase so webpack will try to compile it (so not in src either).
If you used create-react-app to set up your application, for example, this would be the public folder; other webpack setups may use different names but the general concept is the same.
I'm new to Yii2 & I have the following question: what is the best way to upload & access images in Yii2 using advanced template?
Let's say I have common\models\User model with avatar attribute and I want to upload & access this image from both environments: backend & frontend. So what is the best way to do this?
Important note: accessing this image in views I may not know from which environment the image was uploaded (by admin or custom user).
Create a separate folder for static resources
You could serve all your static files in a cookie-less subdomain static.mysite.com that would point to a /static folder in the root of your project. Create aliases for that in your common/config/main file: #static and #staticPath for example, use that through the code.
When you are saving an image, either from the backend or frontend, you use the alias, for example
Image->saveAs(Yii::getAlias('#staticPath/img/users/') . $user->avatar)
When you are displaying the images, use the alias.
Html::img(
Yii::getAlias('#static/img/users/') . $user->avatar
)
You could go even further and create aliases that point directly to the image or img/users folder, or store all the images together and do away with the img/users folder.
I need to load a large number of pictures (around 30) in a sequence as a short movie, each .png has the size 960X540.
I don't want the loader depend on the name of each picture as I will make changes frequently.
Is there any suggestions?
Are you trying to load images from a local file system, or a remote web server?
If you want to load images from a local file system folder, you can use AIR's File/getDirectoryListing().
If you want to load images from a remote server, and you do not want to rely on a pre-defined file naming pattern, the server will need to be able to provide directory information, for example a PHP script that reads the directory contents and outputs XML or JSON. There's no general way for a client to probe a web server for files in a directory. Some web servers do have a default web directory listing script that shows when there is no "default" file in a folder (index.html, etc), but that probably won't be quite good enough for what you're trying to do.
As a final note, if you don't mind manually updating a file on the server that lists all the files as XML or JSON, you could create a simple AIR app to process a local file directory and generate the necessary XML or JSON and upload that to your server.
I would like to allow my users to upload HTML content to my AppEngine web app. However if I am using the Blobstore to upload all the files (HTML files, css files, images etc.) this causes a problem as all the links to other files (pages, resources) will not work.
I see two possibilities, but both of them are not very pretty and I would like to avoid using them:
Go over all the links in the html files and change them to the relevant blob key.
Save a mapping between a file and a blob key, catch all the redirections and serve the blobs (could cause problems with same name files).
How can I solve this elegantly without having to go over and change my user's files?
Because app engine is running your content on multiple servers, you are not able to write to the filesystem. What you could do is ask them to upload a zip file containing their html, css, js, images,... The zipfile module from python is available in appengine, so you can unzip these files, and store them individually. This way, you know the directory structure of the zip. This allows you to create a mapping of relative paths to the content in the blobstore. I don't have enough experience with zipfile to write a full example here, I hope someone more experienced can edit my answer, or create a new one with an example.
Saving a mapping is the best option here. You'll need to identify a group of files in some way, since multiple users may upload a file with the same name, then associate unique pathnames with each file in that group. You can use key names to make it a simple datastore get to find the blob associated with a given path. No redirects are required - just use the standard Blobstore serving approach of setting the blobstore header to have App Engine serve the blob to the user.
Another option is to upload a zip, as Frederik suggests. There's no need to unpack and store the files individually, though - you can serve them directly out of the zip in blobstore, as this demo app does.