How to use PictureMarkerSymbol with webpack?

[slead]

Description

A PictureMarkerSymbol has a URL property, which points to the location of a suitable image, eg symbol.url = "cat-1-hurricane.png";

How can a PictureMarkerSymbol's URL be set with webpack?

https://github.com/Esri/arcgis-webpack-plugin/issues/69#issuecomment-552406286 has an example where the URL is set as a Base64 image:

symbol: new PictureMarkerSymbol({
        url: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMiIgYmFzZVByb2ZpbGU9InRpbnkiIHdpZHRoPSIzNjguNjY2NjY2NjY2NjY2NjMiIGhlaWdodD0iMTY2IiB2aWV3Qm94PSItNjcgNDYgMzY4LjY2NjY2NjY2NjY2NjYzIDE2NiI+PHBhdGggZD0iTTI1LDUwIGwxNTAsMCAwLDEwMCAtMTUwLDAgeiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9ImJsYWNrIiBmaWxsPSJyZ2IoMTI4LDIyNCwyNTUpIiBmaWxsLW9wYWNpdHk9IjEiID48L3BhdGg+PHRleHQgeD0iMTAwIiB5PSIxMTUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtc2l6ZT0iNDIiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC13ZWlnaHQ9ImJvbGQiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJub25lIiBmaWxsPSJibGFjayIgPkMyPC90ZXh0Pjx0ZXh0IHg9IjUiIHk9IjIwMCIgdGV4dC1hbmNob3I9ImVuZCIgZm9udC1zaXplPSI0MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0ibm9uZSIgZmlsbD0iYmxhY2siID4zNTY8L3RleHQ+PHRleHQgeD0iMTk1IiB5PSIxMjAiIHRleHQtYW5jaG9yPSJzdGFydCIgZm9udC1zaXplPSI0MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZT0ibm9uZSIgZmlsbD0iYmxhY2siID5Vbml0MTwvdGV4dD48dGV4dCB4PSIxOTUiIHk9IjIwMCIgdGV4dC1hbmNob3I9InN0YXJ0IiBmb250LXNpemU9IjQwIiBmb250LWZhbWlseT0iQXJpYWwiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSJub25lIiBmaWxsPSJibGFjayIgPjE1MDwvdGV4dD48L3N2Zz4=',
        width: 70,
        height: 70
    })

How can I go from something like `./assets/images/cat-1-hurricane.png' to that? Thanks

[odoe]

You can set this up in your application using the copy-webpack-plugin.

Maybe something like this.

/*
Add a /public folder to the root of your project, and place images in it.
*/
// webpack.config.js
new CopyPlugin([
  { from: 'public', to: '.' }
]),

Then you can use it like this.

view.graphics.add({
  attributes: {},
  geometry: {
    type: 'point',
    latitude: 34,
    longitude: -118,
  },
  symbol: {
    type: 'picture-marker',
    url: './my-image.png', // like this
    width: 46,
    height: 46,
  },
});