Question

带有包裹捆绑器的Vue js无法加载动态图像

<li
    class="list-group-item"
    v-for="(element, index) in carouselImages"
    :key="index">
    <img
         v-if="carouselImages.length"
         class="e-carousel-image"
         :src="element.image.filename" />
    <el-button
               type="danger"
               @click="removeImage(element._id)">X</el-button>
</li>

无法正常工作时，使用相对路径可以正常工作，并将路径更改为哈希值时会给我们404

src="../../../assets/uploads/carousel-1534888549715.jpg"

我们如何解决呢？

Answer 1

有点老，但这就是我刚刚做的，也许会有所帮助。

想象一下，您正在尝试执行以下操作，其中路径的某些部分是动态的：

<img src="../../assets/img/homeActive.png"/>

您自然会想到做类似的事情：

<img :src="`../../assets/img/${item.icon}${item.active ? 'Active' : 'Inactive'}.png`"/>

并期望它呈现为：

<img src="homeActive.fbba0284.png"/>

..但是因为parclejs会查看您的代码以将资产捆绑并将其移动到./dist中，所以它看不到动态图像，因此不会移动。

一种解决方案是导入所有图像，然后使用该图像访问真实路径：

<script>
import images from '../../assets/img/*.png';

export default {
  data() {
    return {
      images,

  // ...

images变量将包含到实际图像的映射：

{
    ...
    "homeActive": "/homeActive.fbba0284.png",
    "homeInactive": "/homeInactive.cf1229b4.png",
    ...
}

您可以像这样使用它：

<img :src="images[item.icon + (item.active ? 'Active' : 'Inactive')]"/>

Answer 2

我完全避免使用 ParcelJS 来处理资产，这对我很有效。

我在 package.json 中的构建脚本将资产目录复制到我的构建目录中。

  "scripts": {
    "copy-assets": "cp -r {manifest.json,images} dist",
    "watch": "rm -rf dist && mkdir dist && npm run copy-assets && parcel watch src/index.js",
    "build": "rm -rf dist && mkdir dist && npm run copy-assets && parcel build src/index.js"

在我的 Vue 文件中，我不必处理图像/等的动态文件名：

                          <img
                            v-else
                            class="generic-logo"
                            src="../images/icon_128.png"
                          />

包裹JS VUE动态图像：src

2 个答案: