Vue.js使用webpack require()动态加载图片的src不起作用

Question

我正在尝试动态绑定图片src到以下形式的URL：../assets/project_screens/image_name.jpg。

我的目录结构如下：

- src
 -- assets
   ---- project_screens
 -- profile
   ---- ProjectList.vue 
 -- store
   ---- profile.js

我知道需要使用webpack的require("path/to/image")来帮助webpack构建那些图片，但路径无法解析。

// store/profile.js
projects = [
  {
    ....
  },
  {
    ....
    img_url: "../assets/project_screens/im1.jpg"
    ....
  }
  ....
]

// profile/ProjectList.vue
<md-card
   class="md-layout-item project-card"
   v-for="(project, idx) in projects"
   :key="idx"
 >
    <md-card-media>
        <img :src="require(project.img_url)" alt="People" />
    </md-card-media>
</md-card>

如果我使用URL字符串而不是动态传递URL字符串，它就能正常工作。在Stack Overflow上查找了一下，但没有其中的解决方案有帮助。难道我还缺少其他东西吗？

- socket_var

---

我只是在src属性中使用了一个method()，该方法调用了一个Node.js函数来读取并响应其内容。非常完美运行。 - Marco

请尝试根据此示例重现您的问题。 - Boussadjra Brahim

在App.vue中制作了一个小演示，网址为https://codesandbox.io/s/vue-examples-7crvi，但它给出了一个不同的错误，即“file_name尚未被转译”，而当我本地运行时，它会出现“找不到模块'../assets/project_screens/image.jpg'”的错误..！ - socket_var

Answer 1

我终于弄清楚了！如果文件名完全以变量的形式给出，Webpack将无法导入该文件，例如：

require(imageUrl) // doesn't work

这是由于如果路径存储在变量中，编译时无法知道路径。但是，如果在require()中使用字符串插值，Webpack可以检测要打包的文件，例如：

require(`../assets/profile_screens/${filename}`) // Works

这样做是因为Webpack在编译时知道路径"../assets/profile_screens"，所以它可以包含文件夹中的所有文件。

- socket_var

---

你还可以在 projects 数组定义中使用 require() ，而不是在模板中使用。 - Phil

当然可以，@Phil。但是如果我以后要转移到数据库中，那么我需要重新进行重构，对吗？ - socket_var

非常感谢！我整个上午都在使用require()处理vue项目中的问题，直到我看到这个答案才恍然大悟，当然变量不起作用，因为它是在编译时进行处理的！ - Bron Thulke

Answer 2

以下语法对我有效：

<img :src="`${project.img_url}`" alt="People" />

它可以使用完整的URL。

require()不是必需的。

- Thiago Muniz