I want to use images from my shopify theme's assets folder in a custom .js script. (product-customizer.js added last in the following section)
In my template's liquid file i have:
<script>
var woodImageAsset = "{{ 'wood.jpg' | asset_url }}";
var ajaxLoaderAsset = "{{ 'ajax-loader.gif' | asset_url }}";
</script>
<script src="{{ 'uploadcare.full.min.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'fabric.min.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'product-customizer.js' | asset_url }}" defer="defer"></script>
I've been able to use every asset accept for wood.jpg just fine.
In product-customizer.js when i try to print the asset URLs from the CDN i get:
console.log(woodImageAsset);
//cdn2.shopify.com/s/files/1/0257/3995/2207/t/1/assets/wood.jpg?1012
console.log(ajaxLoaderAsset);
//cdn2.shopify.com/s/files/1/0257/3995/2207/t/1/assets/ajax-loader.gif?1012
Only wood.jpg is not found.
Note that ajax-loader.gif has already been included in the theme, while wood.jpg is aditionaly added in the theme's assets folder. Is there any special way to upload image assets to a shopify theme or am i missing something else?
If you navigate to assets and examine the files, if you do not see wood.jpg then that means it is not available in that version of the theme. Simply grab a copy from another version of the theme where it is available, or upload it from your hard drive.
The other way to deal with images across all themes would be to upload the image as a file in the shop Settings -> Files section of your shop.
Related
I'm using Nuxt 3
and this is directories structure
images are loaded like this
<img src="/images/index/pic-left.svg" />
I've also tried (start without / )
<img src="images/index/pic-left.svg" />
and it didn't worked again
What's the problem ?
In Nuxt3, the directory is now public and not static.
So it should be /images/index/pic-left.svg.
I have the following img tag :
<img class="logo" src="../../assets/logo/logo_blue.png">
project structure
I don't know why but I only get the following error message:
GET http://localhost:8080/assets/logo/logo_blue.png 404 (Not Found)
try <img class="logo" src="#/assets/logo/logo_blue.png">
here '#' refers to root directory
will this work?
<img class="logo" src="./assets/logo/logo_blue.png">
I believe the path to that image entirely depends on the relative path between the page and image at deployment time. If you're not using HTML5 history mode, this ./assets/ prefix should always work.
I'm trying to change the src of bundle.js in development with create-react-app.
By default the path is: /static/js/bundle.js
<body>
<div id="root"></div>
</script><script type="text/javascript" src="/static/js/bundle.js"></script></body>
In our production we use Apache as proxy to our API, to test SSO and other functionalities. So I have to add some string to the path, to be like this: myApp/static/js/bundle.js
<body>
<div id="root"></div>
</script><script type="text/javascript" src="myApp/static/js/bundle.js"></script></body>
I tried homepage in package.json, but it only works in npm run build.
It also isn't proxy settings, not HOSt in .env
Is this even possible with create-react-app? I checked documentation but didn't find any solution.
you will have to 'npm run eject' and modify the webpack files to change the output.
Little late but if this helps others, this is how you achieve it. After eject, take a look in the config folder, the file: webpack.config.dev.js:
const publicPath = '/';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
const publicUrl = '';
There you could change this values or, second option is to create a .env file and add:
PUBLIC_URL=/xxx
Why is Laravel searching for my CSS file in the wrong directory? I've seen this question posted a few times but it's never actually been answered with Elixir. I am assuming there are possibly some configurations that need to be done which aren't covered in the documentation (at least from what I can tell).
My layout.blade.php file links to the css stylesheet as follows:
<link rel="stylesheet" href="{{ elixir('css/app.css') }}">
My CSS file is loaded in the following path:
localhost/fresh/public/build/css/app-279b78681b.css
However,it is looking for the file here (it is notably missing /Fresh/public/ which I can't determine why?):
localhost/build/css/app-279b78681b.css
I am running an Apache 2.4 webserver for my laravel 5.2 project (not on homestead and not on a VM) and my gulpfile.js file has the following code:
elixir(function(mix) {
mix.sass('app.scss')
.version('/css/app.css');
});
All of that being said, if I were to change my layout.blade.php file to the following:
<link rel="stylesheet" href='css/app.css'>
It will capture my stylesheet that is located in the following directory correctly:
localhost/fresh/public/css/app.css
Sooooo, why can't it capture the css stylesheet when i use Elixir and why is it linking the wrong location?
I have the same problem too.
I used as workaround:
<link rel="stylesheet" href="{{ url(elixir('css/app.css') }}">
or
<link rel="stylesheet" href="{{ asset(elixir('css/app.css')) }}">
It's just that it outputs absolute path then in the generated file. It works but I don't like it so am also still interested how to fix it properly.
I'm trying to run Symfony2 application from a Apache alias /example-site/
The issue is that some of the assets get prefixed with /example-site/bundles/... while some directly start with /bundles.. and do not include the prefix.
What is the cause?
I have found that the problem was the following:
I was using asset command like this (note the / at the beggining):
<img src="{{ asset('/bundles/frontend/images/logo.png') }}" alt="">
Changed it to this solved the problem (removing / from beggining):
<img src="{{ asset('bundles/frontend/images/logo.png') }}" alt="">
So hope maybe helps someone not to lose hours looking for a solution.