带有 webpack require() 的 Vue.js 动态图像 src 不起作用

Posted 2023-02-22

【中文标题】带有 webpack require() 的 Vue.js 动态图像 src 不起作用

【英文标题】：Vue.js dynamic image src with webpack require() not working

【发布时间】：2019-12-12 10:06:00

【问题描述】：

我正在尝试将图像 src 动态绑定到 ../assets/project_screens/image_name.jpg 形式的 URL。

我的目录结构如下：

- 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)"  />
    </md-card-media>
</md-card>

如果我使用 URL 字符串而不是动态传递 URL 字符串，它可以工作。环顾堆栈溢出，没有一个解决方案有帮助。我还缺少其他东西吗？

【问题讨论】：

我只是在 src 属性中使用了一个 method() ，它调用了一个 nodejs 函数来读取并响应它的内容。像魅力一样工作。

请尝试根据this example重现您的问题

在 App.vue 中的 codesandbox.io/s/vue-examples-7crvi 做了一个小演示，但它给出了一个不同的错误，即“文件名尚未被转换”，因为它出错了“找不到模块 '../assets /project_screens/image.jpg'" 当我在本地运行时......！

【参考方案1】：

我终于明白了！！如果文件的名称完全作为变量给出，则 Webpack 无法导入文件：

require(imageUrl) // doesn't work

这是因为如果路径存储在变量中，它在编译时不知道路径。

但是当 Webpack 在 require() 中给出字符串插值时，它可以检测到要捆绑的文件，例如：

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

这是可行的，因为 Webpack 在编译时知道路径“../assets/profile_screens”，因此它可以包含文件夹内的所有文件。

【讨论】：

您也可以在 projects 数组定义中使用 require()，而不是在模板中使用

当然@Phil，但如果我稍后移动到数据库，我需要再次重构它们，对吧？

谢谢你一千遍！我整个早上都在一个 vue 项目中使用 require() 来解决问题，当我终于看到这个答案时，我才恍然大悟，当然变量不起作用，因为它是在编译时进行处理的！

【参考方案2】：

下面的语法对我有用：

<img :src="`$project.img_url`"  />

它适用于完整的网址。

require() 不需要。