Next.js documentation says:
"Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available. We recommend using a third party service like AWS S3 for persistent file storage."
I have issue to understand how would you work with a site with dynamic content. I mean, let say i operate a merchant site, do i have to rebuild the site each time i add a product? or must i use a cdn for my images.
Sounds it should have a more easy way no?
Hi I'm working with create-react-app, i've setup a file upload that allows images to be sent to the backend and saved locally (to the projects build directory). I'm able to dynamically reference images via localhost:4000/image.png so that already works (ie: i have a blog that lets me upload images that I later access via a blogList).
However i figured this probably isn't the best place to dynamically upload images to. I've read the docs on create-react-app and both the locations that mention images dont seem to work for my use case, i feel like im definitely doing something wrong but im not sure what.
docs im referring to:
Says use "import" however im loading dynamically so i cant see how this would work?
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files
says use public, however wouldnt that require a rebuild? since im loading dynamically that isnt possible: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#when-to-use-the-public-folder
NOTE: i have a image uploader and backend working fine it works already using the /build directory. i can upload and dynamically reference images. I'm just looking for best practices for doing something like this. Thanks!
(if you mention "just use nginx" could you please elaborate on the implementation a little)
As a learner I struggled with this problem and tried different approaches once a while ago. For rarely used assets, using /public for client could be useful but I have an app where clients upload images and manage them. Like you, I did not like those approaches and ended up with this setup.
Create a /public directory on backend and upload images to /public/images
Serve /public directory with Express statically.
Use dynamic path variable (via a config setup) for image paths. http://localhost:backend_port/public/images for development and /public/images for production.
I don't know this is the best approach but it worked for me. Beside being best approach when I upload images before that setup CRA was refreshing (hot reloading) my app after each image upload.
I am making android app that must show a lot of images from my REST API. I want to download images, and the next time check for images' name. If the image exists show them from the phone otherwise download from server.
Now I'm using Retrofit for my network requests and Glide for show images. But I have not good idea for solve this issue.
If needed I can change the network library or image loading library.
Thanks in advance
NOTE: This question might be too broad for the liking of S.O.
What you want to do is make what is known as a cache. The idea is that you have a unique identifier (often refered to as a key) for each object in the cache, such as an md5 sum of the image data, or original name + date of creation.
When you want to display an image, you first check if the image exists in the cache. If it exists simply return with the image from cache. if it does not exist, start the download and upon completion you insert the image into the cache.
Here is an example implementation that does what you want. I cannot vouch for it's quality because I never tried it.
Is there a certain way to check which pages on a website use a specific image?
Say I have some image which I don't use on a page anymore, so I'd like to delete it from my server. But I'm not entirely sure if it's being used on other pages, is there a way to check if it's still being shown on other pages?
You can hook your website to google webmaster tools and wait a little bit after a while 404 errors will appear there. This way you can track unused resources and dead ends.
This includes images.
There is a better way if you have direct access to the web server.
Visit every page in your website or let google crawl it.
You can later sort the files by date modified and ones which are not modified lately are not used.
You have to make sure you get the images from the pages so I would use a historyless cahceless session.
How to sort the files according to the time stamp in unix?
We have members-only paid content that is frequently copied and republished without our permission.
We are trying to ‘watermark’ our content by including each customer’s user id in a fake css class, for example <p class='userid_1234'> (except not so obivous, of course :), that would help us track the source of the copying, and then we place that class somewhere in the article body.
The problem is, by including user-specific information into an article, it makes it so that the article content is ineligible for caching because it is now unique to each user.
This bumps the page load time from ~.8ms to ~2.5sec for each article page view.
Does anyone know of any watermarking strategies that can still be used with caching?
Alternatively, what can be done to speed up database access? ( ha, ha, that there’s just a tiny topic i’m sure.. )
We're using the CMS Expression Engine, but I'd like to hear about any strategies. They don't have to be EE-specific.
If you're talking about images then you could use PHP to add a watermark to the images.
How can I add an image onto an image in PHP like a watermark
its a tool to help track down the lazy copiers who just copy the source code as-is. this is not preventative, nor is it a deterrent. – Ian 12 hours ago
Going by your above comment you are happy with users copying your content, just not without the formatting etc. So what you could do is provide the users an embed type of source code for that particular content just like YouTube does with videos. Into that embed source code you could add your own links back to your site, utilize your own CSS etc.
That way you can still allow the members to use the content but it will always come out the way you intended it with links back to your site.
Thanks
You could always cache a version that uses a special string, like #!username!#, and then later fill it in with PHP based on which user is viewing it.
Another way I believe is to switch from caching on the server to instead let the browser cache it locally for a little. That way it is only cached per user, and it reduces the calls to your database. Because an article is pretty static, you could just let the local computer cache it, and pull in comments via javascript.
This last one is probably not one you are really looking for, but I'm gonna come out and say it anyway. You could not treat your users like thieves, and instead treat the thieves as thieves. Go to the person hosting the servers your content is on and send them an email telling them copyrighted premium content is being hosted on their servers without your permission. You can even automate that process.
How to find out what sites are posting your content? Put a link in the body content to your site, and do a Google Search/Blog Search for articles linking to that site. To automate it, use Google Blog Search because it offers RSS feeds. Any one that has a link back to your site could go into a database with a link to the page, someone could look at it, and if it is the entire article, go do a Whois and send them an email.
What makes you think adding css to something is going to stop people from copying it without that CSS? It's more likely that they are just coping the source of the content you are showing them and ignoring all the styling around it. For example, I use tamper data to look at all HTTP requests made by Firefox, if I can see it on the page, I can see it in the logs. Even with all the "protection" some sites try to put in place, they generally will never work. I can grab what I want, without using any screen capture/recording.
If you were serving flv's, for example, I would easily be able to grab the source of that even if you overlayed it with some CSS. I think the best approach would be to get the sites publishing your premium content and ask them to remove it. It's either that or watermark the actual content on the fly while sending it to the browser.