JHipster 4. How to access files in /content folder?

Question

I'm trying to play sound from NavbarComponent:

audio = new Audio('../../../content/images/Ding-dong.mp3');

I can't get image as well:

  ngOnInit() {
    let myImage = new Image(100, 200);
myImage.src = '../../../content/images/image.png';
document.body.appendChild(myImage);
...
}

I always get error in console:

GET http://localhost:9000/content/images/image.png 404 (Not Found)

GET http://localhost:9000/content/images/Ding-dong.mp3 404 (Not Found)

No problem to get there from navbar.scss, like logo:

.logo-img {
            height: 45px;
            width: 70px;
            display: inline-block;
            vertical-align: middle;
            background: url("../../../content/images/image.png") no-repeat center center;
            background-size: contain;
        }

How can I access to these files from .ts file?

JHipster 4. Angular 5.

JHipster uses webpack file-loader, so you could use your assets like in https://stackoverflow.com/questions/37671342/how-to-load-image-files-with-webpack-file-loader. Alternatively, you could put them in a different folder and configure `CopyWebpackPlugin` in `webpack/webpack.common.js` — Gaël Marziou, Feb 23 '18 at 21:37

score 0 · Answer 1 · answered Feb 27 '18 at 11:49

Adding new folder to CopyWebpackPlugin doesn't work. I figured out that path in .ts file must be:

audio = new Audio('/content/Ding-dong.mp3');

not:

audio = new Audio('../../../content/images/Ding-dong.mp3');

for Angular 5 version.

Folder /content referes to /target/www/content/ and file must be placed there manually.

But for AngularJS must be:

audio = new Audio('../../../content/images/Ding-dong.mp3');

JHipster 4. How to access files in /content folder?

1 Answers1