Question

我正在开发Angular2（MEAN堆栈）项目，并尝试以这种方式添加图像（从数据库中检索）：

<img [src]="'../../../public/img/mountains-thumbnail/' + mountain.image">

mountain.image是一个变量，用于保存从数据库中检索的数据（图像）。应用程序正在运行，但它在Google Chrome控制台中出现此错误：

GET http://localhost:3000/public/img/mountains-thumbnail/everest.png 404 (Not Found)

如您所见，我可以成功从数据库中检索图像，但似乎我在图像路径上有错误。

这是我的项目结构（大写是文件夹，小写是文件）：

-ASSETS
    - APP
        - MOUNTAINS
              mountain.component.js  // here I'm trying to include the image
-BIN
-MODELS
-NODE_MODULES
-PUBLIC
   - IMG
       -MOUNTAINS-THUMBNAIL
          everest.png
-ROUTES
-VIEWS
app.js
gulpfile.js
package.json
tsconfig.json

Answer 1

试试这个

<img [src]="'public/img/mountains-thumbnail/' + mountain.image">

如果您的根文件夹是src或app而不是

<img [src]="'src/public/img/mountains-thumbnail/' + mountain.image">

而不是这一个 -

<img [src]="'../../../public/img/mountains-thumbnail/' + mountain.image">

只需删除../../../

即可

Answer 2

如果你试过@Pardeep Jain的答案并且没有和你合作。我只能认为您的服务器无法访问图像文件夹。

验证您的服务器是否允许访问并提供图像文件夹和图像文件。

angular2中的图像相对路径

2 个答案: