I have a background image that fails to load in a BigCommerce Stencil theme only once the theme is deployed.
I am loading the image via CSS:
background-image: url(/assets/img/backgrounds/background_flag#700x394#72ppi.jpg);
The final URL outputted:
http://cdn3.bigcommerce.com/assets/img/backgrounds/background_flag#700x394#72ppi.jpg (not found)
What am I missing?
Related
I'm working on the vuejs app and on developer mode my app running fine as expected. But when I creating the build and serve its build on local/server its not showing the images which is inside the folder of /public/images/image_1.jpg
Here is the code where I'm referencing the images in the component.
computed: {
locomotion_image() {
return `/images/Locomotion_${this.image}.jpg`;
}
}
in the template consume this computed property
<img v-if="size === 'lg'" :src="locomotion_image" :alt="[$t('locomotion cow ') + image]" class="hygiene-score-images__img mb-3">
the is the development environment image, as you can see the path is correct and images are showing as expected
warning I'm getting when build is complete
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (5.46 MiB)
js/chunk-vendors.e5ec3734.js
css/main.881ab0a7.css
js/main.f96f8547.js
as you can seen here images are showing here.
here the after build screenshot, as you can seen the path is the same but images are loading properly
I found out the solution of this problem, By changing into my nginx file, Because /images/image_1.jpg is relative path and it'll be finding the image on this url like so www.xyz.com/images/image1.jpg.
Website doesn't have any route define like that so wasn't getting the image.
I just changed my nginx file and add location / images section.
root /var/www/html/zinpro-frontend/dist;
server_name hk2.zinprofirststep.com;
error_page 404 /;
location /images {
alias /var/www/html/zinpro-frontend/dist/images;
}
according to expo documentation:
The most straightforward way to provide an icon for your app is to provide the icon key in app.json
so I added my own icon to the assets folder where expo's default icons are, and modified app.json to point to my icon:
"expo": {
...
"icon": "./assets/myIcon.png"
}
but when launching I get this error from expo:
Field: icon - cannot access file at './assets/myIcon.png
what am I missing? where should I put my Icon picture?
Solved
by running expo start -c to clear cache.
*Note: it took me a few minutes to sync with my expo client app!
Based on the conversation that I had with the question poster (#Blue Turtle) there are some take aways from this.
Image sizes
It is important to make sure that the image that you are using for your icon must be a perfect square. If it is not Expo will give an error similar to below
Error: Problems validating asset fields in app.json. See https://docs.expo.io/
• Field: icon - image should be square, but the file at './assets/icon.png' has dimensions 1242x2436.
The documents recommend that you use an image that has size 1024x1024 https://docs.expo.io/versions/latest/workflow/configuration/#icon
Local path or remote url to an image to use for your app's icon. We
recommend that you use a 1024x1024 png file. This icon will appear on
the home screen and within the Expo app.
Clearing the cache
Also when updating assets etc, it is advisable to close and restart your bundler, restarting using the following command expo start -c. Starting the bundler this way will ensure that your cache is cleared and that any changes that you have made to packages, assets etc will be made and you will hopefully experience less errors.
I am trying to make an app with electron and vue.js, in this one I want to make a DropZone for file and just get the path of this file. My problem is that electron is opening my file like a file viewer. How can I disable it with vue.js ?
The will-navigate event is designed to catch/parse dropped files in electron. So it is not a vue.js specific issue.
This snippet will prevent the render process from loading the image as content.
mainWindow.webContents.on('will-navigate', (event) => event.preventDefault());
Reference: https://github.com/electron/electron/issues/5919
API Docs: https://github.com/electron/electron/blob/master/docs/api/web-contents.md#event-will-navigate
I have a legacy Android java application into which I am integrating react native. Per Facebook's instructions, I have a generic Activity into which I have added the following code:
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
setContentView(mReactRootView);
However, in my case, I have downloaded my react native bundle and placed it in my Android device's cache, so I have amended that example by adding the following call:
.setJSBundleFile(mReactNativeLocalFile.getAbsolutePath())
This has enabled me to load my downloaded bundle successfully, however none of the images load. Thus, components that load images like:
<Image source={require('./img/background.jpg')} style={styles.backgroundImage} />
Do not render an actual image.
I have confirmed that all images were successfully extracted and placed in a folder named assets adjacent to my bundle. Thus, my folder structure looks like:
com.myapp/cache/templates/MyApp/
index.android.bundle
assets/
img/
background.jpg
Thus, can anyone tell me if it is possible for a react native template bundle that has been downloaded locally to the android file system to refer to images that have also been downloaded locally to the android file system?
Based on this change, the correct answer is a folder structure on your local disk that looks like this:
com.myapp/cache/templates/MyApp/
index.android.bundle
drawable-mdpi/
img_background.jpg
I'm trying to load these specific images using the following uri: https://image.tmdb.org/t/p/w500/zkXnKIwX5pYorKJp2fjFSfNyKT0.jpg
https://image.tmdb.org/t/p/w500/bbxtz5V0vvnTDA2qWbiiRC77Ok9.jpg
The onError event throws the following error:
Error decoding image data
The images loads correctly in safari and chrome. Any ideas what could be wrong? How can I debug this furthur? Other Images are loading correctly, but these specific images throws these error.
RN 0.41
Platform: iOS
download the images and use them in requie("//address of the image in your project")