Link Images from "Dist" folder to the JS file

sage
1

I am using Sage 9, I want to put some image links to the JS file, but not sure how to link the assets to “dist” folder.
Because when we run production that all the assets would has the version numbers, I can’t link them normally to the JS.

PHP files I use "@asset('images/example.jpg')" has no problem at all, so someone can explain how to link assets to JS File dynamically?

thanks!

2

You should be able to reference them the same way you would in CSS, with a relative path: ../images/filename.png

3

thanks, but every time run production it gave different version name and I don’t think the JS catch the version name. “location-pin-fallback_1715c510.png” for example.

4

you can simply require your file from your assets folder. Webpack will do the rest when building for production (via sourcemaps if you’re wondering)!

1 Like
5

thanks, but do you mean the assets/config.json?

6

No, not the config.json.
If you have assets/images/example.png, from your js you can require('../images/example.png'), obviously the path depends on where your js is located, relatively to your scripts folder. webpack will grab the file and pass it on to the file-loader which will automatically return the hashed version of the file.

1 Like
7

Does anyone got a solution for that? I’m having the same issue.

8

What about the reply directly above you? If that’s not working, show us exactly what files you’ve changed and what errors you’re running into.

9

Follow how I solved:

import * as m1 from ‘…/…/images/markers/m1.png’;

Not sure if it would work with require but the recommended it’s to use import instead.

10

I don’t quite follow the instructions here. I have a GMaps Marker defined as follows:

  var image = {
          url: '/wp-content/themes/inspirebcn/dist/images/marker.svg',
          size: new google.maps.Size(70, 70),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(70, 70),
        };

And in production it’s not linked at all.
So, where should I use the require or import solution?

EDIT: Solved using the following:

import * as markerimage from '../images/marker.svg'; //Top-level of the document
...
var image = {
  url: markerimage,
  size: new google.maps.Size(70, 70),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(70, 70),
};

Is the “import” way the recommended solution? @ben Shouldn’t this instruction appear in the Book?

Thanks!!

2 Likes
11

I’m stuck with the same issue.
Although import works on my local environment it doesn’t in production:

import * as color0 from ‘…/…/images/color0.png’;
returns my local URL
/~admin/myproject/wp-content/themes/mytheme/dist/images/character0.png

not relative to my domain:
mydomain.com/wp-content/themes/mytheme/dist/images/character0.png

any clues?

12

Thanks mate, spent hours on this :persevere:

1 Like
13

Gonna pop this here as I didn’t find exactly what I was after - https://stackoverflow.com/questions/42118296/dynamically-import-images-from-a-directory-using-webpack

Allows you to import & reference a dir of images in js

Example code for Sage 9 / Webpack

function importAll(r) {
  let images = {};
  r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
  return images;
}

const flags = importAll(require.context('../images/flags', false, /\.(png|jpe?g|svg)$/));

const outputHtml = `<img src="${flags['uk.png']}" />`;
14

And this may also be helpful, for using a fixed size for SVG marker images:

15

I had a similar issue.

In src/setup.php

wp_localize_script( 'sage/main.js', 'wp_object',
    array(
        'animationurl'  => asset_path('images/anims/button-highlight.json'), ...

In animation.js

let animationPath = window.wp_object.animationurl;
16

Hey, I’ve tried this and it compiles ok but I am getting a 404 for the images in the browser (as they have a URL with ‘assets/images’ as opposed to ‘/dist/images’. The importAll method is attempting to preload them…

17

Hey @cordial is that after building or in dev watch?

18

Hey, when I am running in dev (yarn start).

19

Seems ok on my tests, perhaps try the build script (yarn build)? Otherwise I’m not too sure what’s going on there, sorry.

20

I’m importing an image in Javascript as described to be a working solution in a few replies:

import * as imageSrc from '../images/image.png';

It returns an error when compiling:

This relative module was not found:

* ../images/image.png in ./resources/assets/scripts/routes/home.js

What am I doing wrong?

1 Like