Static Asset Missing Issue

Hi I got an error with adding the static asset in my Vue app
I’ve added the logo to the data as

logo: require("@/assets/img/souq_chat-logo.jpg"),

image as

<img :src="logo" alt="Admin" width="180" height="180" />

But i get the following error in the console and no image
Failed to load resource: the server responded with a status of 404 (Not Found) [object%20Module]:1
The image gets added to the build I’ve checked it.

Hi

img src should be an url or data-url with mimencoded content. I guess the require sets logo to some kind of Module object which is then translated to a string “[object Module]” which img tries to load as an url and it doesn’t work. Can’t you use the url directly inside img? Like

<img :src="@/assets/img/souq_chat-logo.jpg" alt="Admin" width="180" height="180" />

Still, same issue persist

the image was added as follows

Hm. Very strange. Is this project created with vue CLI or is it in a laravel project ( php framework) or something else?

Its Vue cli “vue”: “^2.6.11”

Do you have a vue.config.js in your folder? What is the content of your package.json?

Yes I have a vue.config.js

It has the dependencies and devDependencies list.

Nothing strange there. @ is normally an alias to the src folder. Can you run vue config? What is the definition of @ in the output.

Result for the above command is as follows

Sorry wrong command it should be vue inspect and it outputs alot of lines. @ should be defined as an alias pointing to the src folder of your project somewhere near the top

resolve: {
    alias: {
      '@': '/Users/xxxx/projects/lth/openapi/abd-frontend/src',
      vue$: 'vue/dist/vue.runtime.esm.js'
    },

The below is the result and it points to my projects src where my asset folder lies

Hm. It is a mystery. Everything seems fine. I created a new project with vue create and both

<template>
  <div id="app">
    <img alt="Vue logo" src="@/assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

and the thing you wanted to do first works

<template>
  <div id="app">
    <img alt="Vue logo" :src="logo">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data() {
    return {
      logo: require('@/assets/logo.png')
    }
  }
}
</script>

I’m sorry but I don’t know how to help you any further. Any one else having an idea?

I found some thing new with the issue
The below code works

But this will not

Seems i can only use svg as static asset.

Aha. I could be some problem with importing png in your webpack configuration

/* config.module.rule('images') */
      {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
        use: [
          /* config.module.rule('images').use('url-loader') */
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      /* config.module.rule('svg') */
      {
        test: /\.(svg)(\?.*)?$/,
        use: [
          /* config.module.rule('svg').use('file-loader') */
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },

This is my output from vue inspect. png is handled by url-loader (https://webpack.js.org/loaders/url-loader/) and svg with file-loader (https://webpack.js.org/loaders/file-loader/). If the png is bigger than 4096 (bytes?) it is handled by file-loader. How big is your logo.png? file-loader just output the file to a directory (dist then building) but url-loader can make it a data-url if the size is less than limit (https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)

url-loader should still produce a string in both cases - a path for larger files and a dataURL string for smaller ones.

Jus for kicks, does it also happen when you comment out that webpack plugin that you added in vue.config.js?