Is it possible to have Webpack include image assets in the build bundle without:
Using an import statement for that specific resource (which can be done with Asset Modules in Webpack 5)
Not writing it into a static HTML document as an src attribute (which can be done with HtmlWebpackPlugin)
I would have some React JSX code that reference image resources, either as a src attribute in an <img> element, or have some resource string, say var imgUrl = './Assets/img.svg', and some element later using this string as an attribute.
Currently I could manually copy the entire /Assets folder into /dist, but I would have unused resources in /Assets and would like Webpack to figure out which ones are actually used.
Oh, now I understand, and unfortunately, this is not possible.
React won't detect the value of the src of the image because it will consider it just a string, and not a path. It won't figure out which file are you talking about. The only way to use it the way you want to do it is by having those images in the public folder, which you said you didn't want to do.
In my personal opinion what I usually do with static images if the app is small, is putting them all together in a file by importing them and exporting an object with all of them together. Finally every time I want to use any image I just import that file and use whichever image I want. With this approach, at the end of the day, I'll end up with just one file (bundle). It's just an approach, there are many different ways to do this but it's relative to the case
I don't know if I understood correctly, but maybe you could require the asset inline like this...
<img src={require('./Assets/img.svg')} />
If this is not what you are looking for, maybe you can explain me more in detail... I've quite a lot of experience playing with webpack, I think I may have a solution for you
Related
I'm trying to add some images form static folder in gatsby but somehow the path is always incorrect . Can anyone help me with defining the right path? I tried paths like this
../../static/1.jpg
this
../../1.jpg
and this
/1.jpg
Neither of them worked. It always display the same error
Can't resolve 'img1(or any other path)' in 'S:\Programowanie\Garni\src\pages'
The structure of the project look like this
The static folder recreates the exact same internal structure to the public one so:
<img src={'/1.jpg'} alt="Some alt text" />;
Should be a valid path for /static/1.jpg structure. And so on for the rest. Keep in mind that the key "static" should never be in the src of the image because it's "invisible" to Gatsby's public folder. All paths start from static as a root.
Keep in mind, as a downside, that using static assets will cause those images scapes the post-process and modification.
I'd strongly recommend cleaning the cache in each trial (static assets are hardly cached sometimes) by running gatsby clean.
I have a plugin installed that has its own layout overrides for different controllers. However I'm having trouble understanding the mechanism for modifying the paths.
In the plug-in controller if I tell it to use my layout
$this->layout = 'default_dashboard';
Which is in app/Views/Layout and references an image in app/webroot/default_images.
All the relative links work fine to default_images when I do this, but would like to use some of the Plugin template overides for other actions.
However if I modify the default.cpt file to include some of the images, like say a logo that is used in default_dashboard.ctp. It is unable to map to the same image location.
For example in default.ctp:
echo $this->Html->image('default_images/logo.png',array('alt' =>
'Logo','width'=>'284','height'=>'82'));
produces a path to /img/default_images/logo.png. The Plugin is configured to use the /img location, whereas I want to direct to /default_images in this case. I could make this ../default_images/logo.png, but this isn't very clean.
In addition I have js and css which is having a similar problem. Can someone please explain the mechanism for using a site-wide default.ctp so that it works with inherited plugin templates?
From hard coding the links into the template not using the Html Helper, I see that the browser's relative path is confused because of the routing. For example the first one works with the root specified, the second doesn't.
<img src="/default_images/logo.png" alt="works" width='284' height='82'>
<img src="default_images/logo.png" alt="lost" width='284' height='82'>
What's the best way to make sure that the Plugin layouts and non-plugin layouts can all find the correct path to /default_images ?
Following are the steps that you can follow to resolve relative path problem:
Create a file abc_constants.php in app\Config folder.
Include the file in app\Config\bootstrap.php
require_once(abc_constants.php);
abc_constants.php should contain:
define('HTTP_HOST', "http://" . $_SERVER['HTTP_HOST'].'/');
define('SITE_URL', HTTP_HOST.'your_app_name/');
define('IMAGE_HTTP_PATH', SITE_URL.'app/webroot/default_images/');
Use these constants in your view file accordingly.
<?php echo $this->Html->image(IMAGE_HTTP_PATH.'logo.png',array('alt' => 'Logo','width'=>'284','height'=>'82'));
It looks a bit lengthy process at first time, but once implemented, you can use these constants in Ajax calls in view files, controller's code etc.
I have a fragment of html which is contained in a property of a templated EPiServer page, within that html there is an img tag which has a relative url in it.
When the page is viewed, I can see the src attribute of the tag has been altered to have the prefix /ProjectName/Templates/Pages/.
I understand that this is being done by HtmlRewriteToExternal so that image files that are stored alongside the aspx template (which does indeed live in Templates\Pages) are located correctly, however the image which is intended to be part of the html fragment is in my case actually stored under PageFiles/nnn/ (where nnn is actually the parent page's PageFolderID), and I need to somehow make the altered html reflect that.
I've created a class that inherits from FriendlyUrlRewriteProvider and registered my class. I can debug the application, and watch the requests go through the overridden methods, but I still can't see where the prefix is being added or get any idea how to change it. I can alter the src tag to a different relative path in my class, but the prefix is still being added.
I've read everything I can find on the EPiServer url rewriting, but can't find anything that hints as to where this prefix is being added or how to stop that or change it.
Things I've read:
http://blogs.interakting.co.uk/post/File-Extensions-and-URL-Rewriting-in-EPiServer.aspx
http://blog.fredrikhaglund.se/blog/2008/05/07/disable-episerver-urlrewriter-interference/ (this may contain the answer I'm looking for)
http://labs.kaliko.com/2010/11/prevent-episerver-urlrewrite.html
http://sourcecodebean.com/archives/episerver-friendly-urls-for-paginated-pages-and-why-the-asplinkbutton-must-die/510
http://tedgustaf.com/en/blog/2008/7/create-a-custom-url-rewrite-provider-for-episerver/
http://tedgustaf.com/en/blog/2011/4/publishing-plain-html-pages-in-episerver/
http://sdk.episerver.com/library/cms5/Developers%20Guide/Friendly%20URL.htm
http://sdk.episerver.com/library/cms6.1/html/T_EPiServer_Web_UrlRewriteModule.htm
http://labs.episerver.com/en/Blogs/Ruwen/Dates/111218/112064/112154/
http://world.episerver.com/Blogs/Magnus-Strale/Dates/2011/3/Do-we-really-need-yet-another-HTML-parser/
http://world.episerver.com/Blogs/Yugeen-Klimenko/Dates/2011/6/How-EPiServer-URL-Rewriting-works/
http://world.episerver.com/Modules/Forum/Pages/Thread.aspx?id=46869
I'm open to completely different solutions for what I'm actually trying to achieve, which is as follows:
I have multiple independent sets of static html files and related image / css / js files, which I'm trying to store / publish with EPiServer. The structure of each set looks something like
setfolder/
htmlfileA.html
htmlfileB.html
css/
styles.css
images/
piccy1.png
piccy2.png
js/
magic.js
I've figured that I should create an EPiServer page for the set, and then child pages for each html file, storing the html from the files in a property of the child pages. Currently I'm storing the related static files in the PageFiles of the relevant setfolder page, as that seems to be the most logically consistent place to put them.
It's hard to give the best solution without seeing it all infront of you. But one easy way is to alter the HTML-code when you print the property to the page.
Like <%= ChangeRelativeLinks(CurrentPage["HtmlCode"] as string) %>
And in the ChangeRelativeLinks(string htmlCode) you do a regexp or similar that changes relative links and images to the pagedir as an absolute path.
If you are storing the images in PageFiles which is a Virtual Path Provider you should be able to get the url to your file simply by using the API. On the PageData class (ie CurrentPage in your template) you have a method called GetPageDirectory() which gets the page folder.
You can read more about VPP concepts here:
http://sdk.episerver.com/library/cms6.1/Developers%20Guide/Core%20Features/File%20System/File%20System%20and%20VPPs.htm
No need for a url rewrite provider for this I think.
I am writing an application that has both extjs and sencha touch version. my current folder structure is like
root
...extjs4application
......app
.........model
.........store
.........view
.........controller
...senchatouch2application
......app
.........model
.........store
.........view
.........controller
model and store are similar in both application so i need to organize my folder structure in such a way that both application could share single/common model and store folders. What could be the possible solution? Please help
Based on a cursory glance over the source for Ext.app.Application it looks like it's possible to change the paths without overriding anything.
The path to the app folder is controlled by the appFolder config which defaults to "app." You can change this as you see fit but it's not necessary to do so.
Also included in the application class is an undocumented config called paths which is an object containing simple (key, value) pairs. Example:
paths: {
"Ext": "/path/to/Ext",
"Ext.ux": "/path/to/Ext/ux"
// etc...
}
The Ext.app.Application constructor checks for the presence of the paths config and calls Ext.Loader#setPath for each entry. You can read more about Ext.Loader at Sencha Docs
I don't like including disclaimers with my answers, but in this case I feel I should: I haven't personally used this to create an application so I can't completely vouch for its correctness, but it should be a start. If this should fail, you may need to override or extend the library classes to suit your needs (probably either Ext.app.Application or Ext.Loader).
I currently am loading all images in a folder in my "MyPictures" folder on my machine which works fine...
foreach (string filename in Directory.GetFiles(Environment.GetFolderPath(Environment.SpecialFolder.MyPictures)))
What I really want to be able to do, though, is load all the images in my Images folder within my solution project. Can someone please tell me the correct syntax to do this?
[Nothing in your question (as it is currently stated) is really directly related to WPF as opposed to C# (and Windows development) in general, as far as I can tell. You might get a better reply if the question was tagged to C# as opposed to just WPF.]
I don't think there is a way to reference your solution's folder as such (nor does it really make much sense, as the users of your application won't in general have the solution, only the distributables).
If you need the directory to be within your solution folder somehow, maybe you should refer to the directory your executable resides in (...\SolutionDir\bin\Debug), which you can get using
System.IO.Path.GetDirectoryName(
System.Reflection.Assembly.GetExecutingAssembly()
.GetModules()[0].FullyQualifiedName);
(Of course, you could tack \..\.. to that to refer to the SolutionDir instead, but that'd be a bit ugly.)
Depending on the usage of the images, though, it'd probably be better to put them under one of the defined special directories -- Environment.SpecialFolder.CommonApplicationData sounds like the best candidate, if the images are to be shared by all users.
One way to access images stored in a folder inside the WPF project is to do the following:
If you have already added the images inside an Images folder, Add the images file names in the Resources.resx file under Properties. You can access the images in the code by the following
string imageFilename = "pack://application:,,,/APP.UI;component/Images/" + Properties.Resources.imagefilename;
var src = new BitmapImage();
src.UriSource = new Uri(imageFilename , UriKind.Absolute);