Image 使用“需要解析图像路径[Vue]时将图像放置在何处”

在何处复制图像以使以下命令正常工作

<b-img :src="require('../static/picture.jpg')" />

<b-card-img :img-src="require('../static/picture.jpg')" />

我从vue引导程序网站获得以下代码

我想尝试一下，而不是对transformToRequire选项做很多更改

---

vue项目的部分目录布局：

---

myProject | src | components（.vue文件位于components目录中）

根据您提供的结构，您将在

src

中有一个

静态文件夹，用于放置图像

但是请注意，
require
与当前文件相关。
根据您给出的结构，您将在
src
中有一个
静态
文件夹，用于放置图像

但是请注意，
require
是相对于当前文件的。
路径是相对于您编写require的文件的

因此，假设脚本位于
/src/components/mycop.vue
中，您的文件将在
中查找/src/static/picture.jpg

TransformToRequest的目的不是管理资产位置，尽管如果路径设置不正确，它可能会发出错误。transformToRequire只是从
src=“…”
到
src=“require（…）”
的一个语法糖，其余的由webpack来完成

如果您不想在文件所在的位置加边框，特别是在移动文件时，还有一种选择

在webpack中，您可以为某些路径设置别名，通常为：

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }   
  },

以便您可以使用：

<b-img :src="require(@/static/picture.jpg)" />

路径是相对于您编写所需文件的路径

因此，假设脚本位于
/src/components/mycop.vue
中，您的文件将在
中查找/src/static/picture.jpg

TransformToRequest的目的不是管理资产位置，尽管如果路径设置不正确，它可能会发出错误。transformToRequire只是从
src=“…”
到
src=“require（…）”
的一个语法糖，其余的由webpack来完成

如果您不想在文件所在的位置加边框，特别是在移动文件时，还有一种选择

在webpack中，您可以为某些路径设置别名，通常为：

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }   
  },

以便您可以使用：

<b-img :src="require(@/static/picture.jpg)" />


谢谢您的帮助。附加提示：如果将.JPG扩展名（？）大写，则（npm start）会显示错误消息
提供错误消息，但
或
非常有效。感谢您的帮助。附加提示：如果将.JPG扩展名（？）大写，则（npm start）会显示错误消息<代码>

给出错误消息，但

或

效果很好。