0

i have a project with webpack and vue.js. When i add image in vue template with src like '/images/imageName.png', browser throw me error 404. How do I configure it so that it sees absolute paths?

I have this root path:

../public
- myProject
-- webpack.config.js
-- src
--- app.vue
--- app.js
-- images
--- some folders with images

in Vue template i use src with absolute path:

<img src="/images/apps/small-logo/android-text-logo.png" alt="img">

output: {
    path: path.resolve(__dirname, '../../public'),
    publicPath: '/',
    filename: '[name].js'
  },

test: /\.(png|jpg|svg)$/,
   use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]'
            }
   }
]
DmitriyTymoschenko
  • 3
  • 2

1 Answers1

0

An absolute path should contain more info than what you have above which is the reason for the 404, it should include the protocol i.e http, file

Relative

<img src="images/apps/small-logo/android-text-logo.png" alt="img">

Absolute

<img src="http://example.com/images/apps/small-logo/android-text-logo.png" alt="img">
<img src="file:///some_random_path/images/apps/small-logo/android-text-logo.png" alt="img">

If you want to use an absolute path, make sure to include the protocol and necessary paths.

For relative paths you can define the base tag in html like this:

<base href="/some_random_path/" />
phainix
  • 179
  • 2
  • 9
  • thank u, but how i can include localhost to absolute path in webpack on devserver ? – DmitriyTymoschenko Oct 02 '19 at 14:59
  • Try this `img`, replace PORT with the port you are using i.e. 3000, 3030 – phainix Oct 02 '19 at 15:07
  • so, then i want to build, this src will not brake in my build? – DmitriyTymoschenko Oct 02 '19 at 18:21
  • It will definitely break it, this only works in your development environment, you should create a global variable in your webpack config file. Have 2 different webpack config files one for production and the other for development. You can then set the base path in each one i.e the base path for development and the one for live. Check out [this other answer for tips on setting global variables](https://stackoverflow.com/a/40416826/5494427). – phainix Oct 03 '19 at 08:24