Skip to main content
Sitecore

Return to Answer

added 94 characters in body
Source Link
Adam Weber
Adam Weber
  • 2.3k
  • 11
  • 19

A general rule of thumb is that if you have an asset that is not referenced in your Sitecore app route/content data, you need to ensure that you're referencing it in your app in the way that you normally would for static assets in a webpack-bundled app. e.g.

import favicon from './assets/favicon.png';` // note: path is relative to the .js file

render() {
  return <link rel="icon" href={favicon} />;
}

Otherwise, if you are using absolute paths, webpack won't know about the asset and won't do anything with it.

<link rel="icon" href="/assets/favicon.png" /> // note: path is absolute

In this example, you have to ensure that your /assets/favicon.png file is copied to your output folder as webpack will not analyze the href attribute. This could be a separate build step or via webpack plugin, etc...

I'll also note that this is true for other assets like CSS, fonts, etc... not just images.

A general rule of thumb is that if you have an asset that is not referenced in your Sitecore app route/content data, you need to ensure that you're referencing it in your app in the way that you normally would for static assets in a webpack-bundled app. e.g.

import favicon from './assets/favicon.png';` // note: path is relative to the .js file

render() {
  return <link rel="icon" href={favicon} />;
}

Otherwise, if you are using absolute paths, webpack won't know about the asset and won't do anything with it.

<link rel="icon" href="/assets/favicon.png" /> // note: path is absolute

In this example, you have to ensure that your /assets/favicon.png file is copied to your output folder as webpack will not analyze the href attribute. This could be a separate build step or via webpack plugin, etc...

A general rule of thumb is that if you have an asset that is not referenced in your Sitecore app route/content data, you need to ensure that you're referencing it in your app in the way that you normally would for static assets in a webpack-bundled app. e.g.

import favicon from './assets/favicon.png';` // note: path is relative to the .js file

render() {
  return <link rel="icon" href={favicon} />;
}

Otherwise, if you are using absolute paths, webpack won't know about the asset and won't do anything with it.

<link rel="icon" href="/assets/favicon.png" /> // note: path is absolute

In this example, you have to ensure that your /assets/favicon.png file is copied to your output folder as webpack will not analyze the href attribute. This could be a separate build step or via webpack plugin, etc...

I'll also note that this is true for other assets like CSS, fonts, etc... not just images.

Source Link
Adam Weber
Adam Weber
  • 2.3k
  • 11
  • 19

A general rule of thumb is that if you have an asset that is not referenced in your Sitecore app route/content data, you need to ensure that you're referencing it in your app in the way that you normally would for static assets in a webpack-bundled app. e.g.

import favicon from './assets/favicon.png';` // note: path is relative to the .js file

render() {
  return <link rel="icon" href={favicon} />;
}

Otherwise, if you are using absolute paths, webpack won't know about the asset and won't do anything with it.

<link rel="icon" href="/assets/favicon.png" /> // note: path is absolute

In this example, you have to ensure that your /assets/favicon.png file is copied to your output folder as webpack will not analyze the href attribute. This could be a separate build step or via webpack plugin, etc...