In Ant design version 4, Avatar Absolute link images are working, but relative link images are not working?
This below absolute link working
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
but relative link not working, like below
<Avatar src="./icons/user.png" />
For local resources, you have to rely on webpack file-loader, the reason is webpack move stuff around, I don't know if you are using CRA or webpack, but usually is
import userPng from './icons/user.png';
<Avatar src={userPng} />
Related
When I use the #vue/cli to create a vuejs project, I see that there is a folder /assets that contains images and whatever I want. Than they can be referenced in the html such as <img src="#/assets/images/home.png" /> or import it on the js part.
My question is, why can't I just put the assets in /public/assets and put directly <img src="/assets/images/home.png" /> in my code? Where is the advantage of these assets?
It allows Webpack to handle assets, which means it can merge/minify files (useful for JS and CSS), optimize images, and more importantly version them so that cache handling is improved.
I am using react-native for windows UWP. I don't understand how to load local raster image assets I want to package with the application. I am currently placing my image files in windows/foobar/Assets/ (where foobar is the name of the application). My initial assumption was that I could simply require them in the source like this:
<Image style={{ width: 50, height: 50}} uri={require('./windows/foobar/Assets/energy.png')} />
This works for svg files but errors for raster files saying it was unable to define the module. That makes sense since require is for loading modules and raster files are definitely not that. VS Code tries to help me understand this by not auto completing any raster files under Assets/.
However I've seen some examples online state I can do:
source={require('#expo/snack-static/react-native-logo.png')}
I don't understand why this format could work but the local path would fail.
I've seen other examples stating I should use:
uri={require('ms-appx:///ReactAssets/energy.png')}
But this does not resolve.
Ultimately I assume I need to tell react-native for windows about the assets I want to include in my app so they can be resolved through some kind of resource bundle, but I'm not finding any documentation on how to accomplish this. What do I do?
The discussion on this github issue is a little confusing to follow but eventually got me to the right answer.
Put your image under windows\\{yourprojectname}\Image
Open the windows solution in Visual Studio at windows\\{yourprojectname}.sln
In solution explorer, at the top, click on 'show all files'.
Expand the project for your Universal Windows app, find the Images folder, right click your image file and select 'Include in project'. Save all files.
Restart react-native
You can now refer to your images with:
<Image source={{ uri: "ms-appx:///Image/yourimage.png"}}/>
I'm want to bundle and load local html with assets with in expo managed app.
I just created blank TS project and installed react-native-webview. WebView is loading external sites well.
I added index.html and some assets to assetsfolder. It seems that currently Expo/RN dosn't support loading html with require (at list I didn't find how to solve it. So I push HTML code to WebView.
const html = `<image src="assets/splash.png" height="128" width="128"></image>`
return(
<WebView source={{ html: html }}
/>
)
But I see nothing (blank placeholder for image). I tried different paths for instead of assets/splash.png, but nothing seem to work. I don't get how to make HTML load assets that are in assets folder? Or I should place it somewhere else?
I'm trying to view an image in one of my pages. I'm on a latest node-express-vue-nuxt-babel setup. My final goal was:
<img :src="'#/assets/images/projects/' + project.image" width="50px" />
I started with the above, but I got a 404. So I tried with a specific image:
<img src="#/assets/images/projects/5a2db62e346c1.jpg" width="50px" />
and it worked, but going back to dynamic source didn't and:
to <img :src="'#/assets/images/projects/5a2db62e346c1.jpg'" width="50px" />
was enough to produce the 404 again. The 404 was in the console, the page was loading fine with no errors but alas no signs of the image(s). Inspecting the elements made me notice that the dynamic :src became:
<img src="#/assets/images/projects/5a2db62e346c1.jpg" width="50px" />
and the 'static' src became:
<img src="/_nuxt/assets/images/projects/5a2db62e346c1.jpg" width="50px" />
So to make it work I had to renounce to the initial "#" and substitute it with "_nuxt":
<img :src="'_nuxt/assets/images/projects/' + project.image" width="50px" />
Ok, nice, but.. why?
Do this: <img :src="require('#/assets/images/projects/' + project.image)"/>
VueJs
There are several asset URL transforms rules in vuejs. Here is one of them:
If the URL starts with #, it's also interpreted as a module request. This is useful if your webpack config has an alias for #, which by default points to /src in any project created by vue-cli
For more information : Asset URL
You are using webpack for bundling the application.
At a very high level webpack looks for require and takes care of bundling your scripts. Exactly what that means depends on your specific configuration, but it usually gathers all the js files in one file, usually minifies and removes unused code.
Webpack is not limited to js files. By the use of plugins it can handle extracting images from html files, load resources from urls and much more.
The way it ends up loading images is still by the use of require, the plugins just plug everything in so webpack can handle them. That being said, require is a compile time feature and if the path can't be determined at compile time webpack will not work. Webpack will usually translate the image path to a path that's available at runtime (usually they are different and depend on your webpack config).
When you bind src like this:
:src="'#/assets/images/projects/' + project.image"
The path can't be determined at compile time and as such vue will resolve it at run time, but webpack already finished and it will not translate your path.
There are a couple of ways to handle this:
As you found out: using a static runtime path, that is not handled by webpack, will work. The downfall is that if you change the way you build your project you'll need to update all references (in your case _nuxt). Note: if using vue.cli, you usually get a folder called static that is used exactly for this.
Use a binding, but bind to the run time path. This has the same downside as above and also the following: webpack has cache-busting technics that mangle file names, so knowing the final name of an asset that is handled this way by webpack is virtually impossible.
It worked also with backticks:
<img :src="require(`#/assets/images/projects/` + project.image)" width="100px" />
Thanks guys!
I recently started to integrate react native in an already existing android app. I have tried multiple image loading styles as mentioned on the page https://facebook.github.io/react-native/docs/images.html
Method 1(Hybrid Apps): For android use <Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />
This method doesn't load anything on the app, just a 40X40 empty area is loaded.
Method 2: <Image source={require('./my-icon.png')} />
I used the absolute path to the image app/res/drawable-hdpi/image.png but it didn't work either.
Got the error
Unable to resolve module `../app/res/drawable-hdpi/image.png` from
`/Users/MyName/StudioProjects/reatProject/android/react-native/index.js`: could not resolve
`/Users/MyName/StudioProjects/reatProject/android/app/res/drawable-hdpi/image.png' as a file nor as a folder
I always provide height and width attributes in style map.
My project structure is
android/
app/
res/
src/
tests/
react-native/
index.js
package.json
package.lock.json
tests/
build.gradle
The project build.gradle file has the maven repository included as maven { url "$rootDir/react-native/node_modules/react-native/android" }
I had posted this as an issue on react native github issues, but got no solution there, so asking here if anyone has been through the same issue. I am fairly new to react native so maybe I am doing something wrong.
I had ended up making a mistake. The image source has to be of the form {{uri:"name"}} and I kept writing {{uri:"name.png"}}. It doesn't accept png in this scheme, but in the asset:// and the require scheme, it does. Its just a bit confusing.
For anyone facing the same issue, the same directory structure would work, just use image this way, and avoid using the extension.
<Image source={{uri:"imageName"}} style={{height:100, width:100}}/>