Images do not render in call to makeSvg or makeImage

GoJS
21

yes it is, http://localhost:4200/

22

I had just edited my response to be more precise, and that may have stated what the problem is – you aren’t using the same port number.

23

Hi ,

For the above mention image path “http://localhost/aspnet_client/process_api.png”, i added the image in default website folder, that is “C:\inetpub\wwwroot\aspnet_client”.

But I am not getting for the case of specific port, how to add and refer the required images to http://localhost:4200/

And also i tried by referring the images from Application’s assets folder as below:

Keeping the images in application local folder as “./assets/Image/process_api.png” and referring in the template as

this.diagram.nodeTemplate =
$(go.Node, “Vertical”,
new go.Binding(“location”, “loc”, go.Point.parse),
$(go.Shape, “RoundedRectangle”, { width: 15, height: 15, strokeWidth: 0, fill: “red” },
new go.Binding(“fill”, “color”)),

      $(go.Picture, "./assets/Image/process_api.png", 
    {
      
     width: 68, height: 47, background: 'lime',
    
    } )
  );

and

in angular.json file the assets folder is configured as

“my-app”: {
“root”: “”,
“sourceRoot”: “src”,
“projectType”: “application”,
“architect”: {
“build”: {
“builder”: “@angular-devkit/build-angular:browser”,
“options”: {
“outputPath”: “dist”,
“index”: “src/index.html”,
“main”: “src/main.ts”,
“tsConfig”: “src/tsconfig.app.json”,
“polyfills”: “src/polyfills.ts”,
“assets”: [
“src/assets”,
“src/favicon.ico”
],
“styles”: [
“src/styles.css”
],
“scripts”: []
}

With this local images and configuration needed Image is getting loaded in the diagram, but not exporting.

24

Yes, that would be a security violation, according to the CORS rules. You will need to either enable CORS for those images at the default port or refer to those images on port 4200.

25

Any idea on the following case?

For the above mention image path “http://localhost/aspnet_client/process_api.png”, i added the image in default website folder, that is “C:\inetpub\wwwroot\aspnet_client”.

But I am not getting for the case of specific port, how to add and refer the required images to http://localhost:4200/

26

It’s probably easiest to enable CORS on those images. https://enable-cors.org/

27

Use relative instead of absolute paths. When serving a page from localhost:4200 you should fetch the images from the same. In this case you can use

"aspnet_client/process_api.png"

As the path, if you’re only serving on the localhost index.

28

Hi simon,

We tried all the way to export diagram with images with your suggestions, but we couldn’t succeeded. If you can provide us a sample which is helpful for us to export with diagram with respect angular. As of now all the diagram related features are working except export of diagram with images. but in our product export is one of the major feature. Without that we cant proceed with Gojs diagrams.

Thanks & Regards
Nageswar

29

What is the URL that you are now using as the Picture.source?

30

same issue with angular !

31

If the images are served locally, this shouldn’t be a problem.

If not, it’s a CORS issue, and you’ll need to either change how those files are shared or specify sourceCrossOrigin in your go.Picture element.

I just tried modifying the nodeTemplate from the gojs-angular-basic sample by adding a Picture element like this:

$(go.Picture, { 
       source: "https://placekitten.com/200/300",
       sourceCrossOrigin: function(pict) { return "anonymous"; } 
}),

Diagram.makeImageData works just fine.

1 Like
32

thank you ryanj for your reply
i tried your code and it’s works fine !

so i found the issue is related to uppercase letters in the url :

for gojs bad url :
https://localhost:5001/Resources/Images/Components/1639026002.jpg

working url:
https://localhost:5001/resources/images/components/1639026002.jpg

i don’t know why gojs not working with the both urls !

my solution :
adding new go.Binding(“source”, “img”,function(s) { return s.toLowerCase(); }),

33

Domain names are case insensitive.

URIs or URLs are generally case-sensitive. That is because the web server processing the whole request gets to decide exactly how to treat the letters that are beyond the domain part of the URL or URI.

So if part of your URL is referring to a file on the web server’s file system, the case may matter.